Geralmente o pessoal usa para criar esses pequenos componentes elementos simples como as tags: i , b , span ou qualquer elemento que não interfira no fluxo normal do documento, lembrando que para algo mais complexo poderia usar os pseudo-seletores : :after e o :before , qualquer hora faço um post explicando esses seletores.
Bom , primeiramente vamos fazer o markup que o nosso html terá, usarei um elemento span ( só por conveniência ).
<span class="circle one_open"></span>
Aqui usei uma classe para representar a forma do loader que será um círculo e outra classe para indicar que o loader terá uma só abertura ( mais tarde vou fazer uma com duas aberturas , e aí reutilizarei as classes já feitas ).
Agora vamos para o css básico:
.circle{
display:inline-block;
width:15px;
height:15px;
border-radius:100%;
border:5px solid #1abc9c;
}
E como está ficando até agora:
See the Pen Part-one script by Marlysson (@Marlysson) on CodePen.
Observação
Vejam que adicionei a propriedade display com o valor inline-block.
O motivo de adicionar o valor display:inline-block é que a tag span não possui uma propriedade de fluxo de documento definida, sendo assim , ele não reconhece determinadas propriedades, como é o caso da width e da height . Quando alterei o valor da propriedade display para inline-block o elemento agora é um elemento que se encaixa no fluxo normal da página ( inline ) , mas também podendo reconhecer propriedades de blocos para ( nesse caso ) ter alguma forma , seja circular , quadrada , triangular... etc.
Agora vamos eliminar uma das bordas do círculo para ter a ilusão que é um loader. O truque para isso é deixar uma das bordas transparente, assim dará a impressão que não há nada ali.
.one_open{
border-top: 5px solid transparent;
}
E voilà. Agora só falta animar.
See the Pen Step-two by Marlysson (@Marlysson) on CodePen.
Para animar deve ser feito dois passos:
- Adicionar o comportamento à cada passo da animação ( keyframes )
- Ligar o keyframe com o elemento
Passo 1
Vamos fazer com que o elemento fique rodando de 0 à 360 graus;
@keyframes rotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
Os keyframes são responsáveis por definir o comportamento do elemento a cada estado durante a execução da animação , com isso pode-se definir a forma do elemento desde sua criação até completar a animação.
Passo 2
Para ligar com o elemento html devemos usar algumas propriedades de css-animations.
.one_open{
animation-name:rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration:1s;
}
Explicando:
O elemento one_open será animado segundo o comportamento da animação de nome rotate.
Propriedades e valores:
- animation-name : O mesmo nome do keyframe criado
- animation-iteration-count : Aqui foi definido para que fique para sempre executando a animação.
- animation-timing-function : Aqui é definido o ritmo da animação , além de linear é possível definir para que ela inicie rápido e desacelere no final , é possível definir várias velocidades durante durante a animação.
- animation-duration : Duração total da animação.
E no final a animação ficou assim:
See the Pen Step-three by Marlysson (@Marlysson) on CodePen.
E para criar uma nova forma fica fácil , pois já há uma classe específica para o círculo , ficando para a gente só criar a classe responsável pela outra animação. Por exemplo , uma com duas aberturas ficaria assim:
.two_open{
border-top:5px solid transparent;
border-bottom:5px solid transparent;
}
/* Usando junção de seletores ( para não repetir propriedades ) */
.one_open , .two_open {
animation-name:rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration:1s;
}
Resultado final
See the Pen Step-four by Marlysson (@Marlysson) on CodePen.
Bom pessoal está aí um simples loader para usarem nas suas aplicações , ou só ver como grandes players de bibliotecas de animação fazem isso.
Até o próximo post.