Imagen de la etiqueta css

C贸mo crear un spinner loader con CSS 馃寑

2 minutos de lectura 驴Una errata? Edita el art铆culo

Un spinner loader, o donut spinner, es un elemento muy t铆pico en nuestras aplicaciones ya que le indica al usuario que un contenido se est谩 cargando.

Vamos a ver c贸mo puedes crear el tuyo con HTML y CSS en muy pocas l铆neas de c贸digo. Si quieres, puedes ver el v铆deo donde lo hago paso a paso:

隆Suscr铆bete! 79K

驴C贸mo queda el spinner?

Si quieres ver el resultado final, te dejo aqu铆 un Codepen para que veas c贸mo quedar铆a nuestro spinner:

See the Pen CSS Spinner by @midudev (@miduga) on CodePen.

Creando el spinner con HTML y CSS desde cero

Lo primero que tenemos que hacer es el HTML de nuestro spinner:

<div class='spinner'></div>

Y a partir de aqu铆 estilamos esta clase con CSS. 隆Vamos por partes!

Primero le a帽adimos un borde, con 4 p铆xeles de borde y lo hacemos con un color negro pero con mucha transparencia. Pero hacemos que uno de los lados no tenga color, que sea transparente. Y tambi茅n hacemos que use el border-radius, para curvar este nuevo borde.

.spinner {
  border: 4px solid rgba(0, 0, 0, .1);
  border-left-color: transparent;
  border-radius: 50%;
}

Para las medidas, usamos una forma cuadrada con un alto y ancho de 36px.

.spinner {
  border: 4px solid rgba(0, 0, 0, .1);
  border-left-color: transparent;
  width: 36px;
  height: 36px;
}

Y finalmente vamos a a帽adir nuestra animaci贸n. Vamos a llamar a esta animaci贸n spin, que dure un segundo y el tipo de animaci贸n sea linear que es lineal. Puedes usar la que quieras en este punto.

Lo importante es que pongas que se tiene que hacer de forma infinite, para que se haga repetidas veces la animaci贸n.

.spinner {
  border: 4px solid rgba(0, 0, 0, .1);
  border-left-color: transparent;
  width: 36px;
  height: 36px;
  
  animation: spin 1s linear infinite;
}

Ahora creamos la animaci贸n usando @keyframes de forma que empezamos en un punto (el punto de inicio es 0%) y, al final, habremos rotado el spinner completamente (100%):

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

隆Y ya lo tenemos! Puedes ver el resultado final en este enlace: https://codepen.io/miduga/pen/RwGxpyJ?editors=1100

Y si prefieres verlo en v铆deo, lo tienes aqu铆:

隆Suscr铆bete! 79K

Contenido del art铆culo

Comparte el art铆culo