Como criar: Carregador CSS

Aprenda a usar CSS para criar pré-carregadores.

Experimente pessoalmente

Como criar carregador

Primeiro passo - Adicionar HTML:

<div class="loader"></div>

Segundo passo - Adicionar CSS:

.loader {
  border: 16px solid #f3f3f3; /* cinza claro */
  border-top: 16px solid #3498db; /* azul */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Experimente pessoalmente

Exemplo de explicação:

border propriedade especifica o tamanho e a cor da borda do carregador.border-radius transforma o carregador em circular.

a parte azul que gira no interior da borda é especificada pela propriedade border-top propriedades especificam. Se você quiser mais "giradores", também pode incluir border-bottom,border-left e/ou border-right（veja os exemplos abaixo）。

O tamanho do carregador é especificado por width e height propriedade especificada.

Por fim, adicionamos uma animação que faz a parte azul girar perpetuamente a uma velocidade de animação de 2 segundos.

Atenção:para aqueles que não suportam animation e transform o navegador da propriedade, você também deve incluir um -webkit- prefixo. Clique no exemplo para ver como fazer isso.

adicionar mais giradores

Exemplo

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

Experimente pessoalmente

Exemplo

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

Experimente pessoalmente

Exemplo

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

Experimente pessoalmente

Outro exemplo

Como posicionar o carregador no centro da página e exibir "conteúdo da página" ao finalizar o carregamento:

Exemplo

Experimente pessoalmente