Posted in

Añadir un loader solo con CSS

Podemos añadir un loader usando solo CSS, a continuación un ejemplo de como crearlo. Podemos modificar el estilo dándole otro color o grosor y cambiar el tipo de animation, en el siguiente ejemplo usamos una velocidad de 0.6 segundos linear e infinite. Podemos usar ease e infinite para dar una sensación de frenazos y además tenerlo en varios colores a la vez usando border-color-top, bottom, left y right…

@keyframes spinner2 {
  to {transform: rotate(360deg);}
}

.spinner2:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 45px;
  right: 22px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spinner2 .6s linear infinite;
}

Mediante jquery aplicamos la clase spinner2 para mostrarlo en cualquier elemento.

$(".birth-col label").addClass('spinner2');

Y para quitarlo basta con hacer un removeClass de la clase spinner2.

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *


The reCAPTCHA verification period has expired. Please reload the page.