04 de agosto de 2020 ● 1 min de leitura
Loading com CSS
Animação de loading com HTML e CSS
Pode não parecer, mas essa é uma div simples girando com CSS
Pode ser vista em funcionamento em Loading Spinner
Como fazer
Adicionando uma div com a classe spinner
<div class="spinner"></div>
Aplicação de estilo, em uma página HTML com o básico
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.spinner {
border: 12px solid #ffffff29;
border-left-color: #ed34a2;
height: 120px;
width: 120px;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}