Como fazer um loading spinner com CSS puro

1a 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)