Animação de carregando (loading) com CSS puro
Estilização de carregando com girando estilizado somente com HTML e CSS
Pode não parecer, mas essa é uma div simples girando com CSS
Também pode ser observada funcionando 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: #e0138c;
height: 120px;
width: 120px;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
