Loading Bolinha no Círculo

Loading Bolinha no Círculo

Neste Tutorial vamos fazer um loading formato de anel com uma bolinha em círculo com css3 e html.

Vamos Adicionar o Html:

  <div class="bolinha-no-circulo">
     <span></span>
  </div>

Vamos Adicionar o Css:

.bolinha-no-circulo { outline: 1px solid transparent; }
.bolinha-no-circulo {

	width:65px;
	height:65px;
	display:inline-block;
	color:#ffffff;
	padding:0px;
	border: 10px solid rgb(234, 234, 234);
	border-radius:50%;
	
	background:transparent;
}

.bolinha-no-circulo span {

    width:10px;
	height:10px;
	margin-top:-10px;
	vertical-align:top;
	border-radius:100%;
	background:#33e0e6;
	display:inline-block;
	
	-webkit-animation:bolinha-no-circulo 1s linear infinite;
	animation:bolinha-no-circulo 1s linear infinite;
	transform-origin:center 33px;
	-webkit-transform-origin:center 33px;
}

@keyframes bolinha-no-circulo {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@-webkit-keyframes bolinha-no-circulo {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(360deg); }
}

Veja o Resultado !

Baixar Código Veja Funcionando