Como fazer - carregador de CSS
Aprenda como criar um pré-carregador com CSS.
Como criar um carregador
Etapa 1) Adicionar HTML:
Exemplo
<div class="loader"></div>
Etapa 2) Adicionar CSS:
Exemplo
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
}
Exemplo explicado
A border
propriedade especifica o tamanho da borda e a cor da borda do carregador. A border-radius
propriedade transforma o carregador em um círculo.
A coisa azul que gira dentro da borda é especificada com a
border-top
propriedade. Você também pode incluir border-bottom
, border-left
e/ou
border-right
se quiser mais "spinners" (veja o exemplo abaixo).
O tamanho do carregador é especificado com as propriedades width
e height
.
Por fim, adicionamos um animation
que faz a coisa azul girar para sempre com uma velocidade de animação de 2 segundos.
Nota: Você também deve incluir um prefixo -webkit- para navegadores que não suportam animações e propriedades de transformação. Clique no exemplo para ver como.
Adicione mais spinners
Exemplo
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}
Exemplo
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
Exemplo
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
Outro exemplo
Um exemplo de como colocar o carregador no meio da página e mostrar o "conteúdo da página" quando o carregamento estiver concluído: