Como fazer um loading spinner com CSS puro
314d atrás
Nesse tutorial você aprenderá a fazer um loader com HTML, SVG e #CSS puro.
O primeiro passo é adicionar o SVG a seguir no seu HTML:
<svg class="spinner" height="64px" width="64px">
<circle class="path" cx="32" cy="32" fill="none" r="28" stroke-width="8"></circle>
</svg>
Depois, adicione o CSS para o svg com classe .spinner:
.spinner {
animation: spin 1.25s linear infinite;
}
No CSS acima nós definimos uma animação que irá girar o svg, agora cole o código da animação no seu CSS:
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
O próximo passo é estilizar o elemento circle com classe .path:
.path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
animation: dash 1.25s ease-in-out infinite, colors 5s ease-in-out infinite;
}
Por fim, vamos colocar o código das animações que nós definimos anteriormente:
@keyframes colors {
0% {
stroke: #4285F4;
}
25% {
stroke: #DE3E35;
}
50% {
stroke: #F7C223;
}
75% {
stroke: #1B9A59;
}
100% {
stroke: #4285F4;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform: rotate(450deg);
}
}
A primeira animação controla as cores do spinner, a outra a abertura e fechamento do círculo.
Esse será o resultado:
Comentários (0)