5

Tengo el diseñado un loader pero como hago para que se anime.

.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #fff;
    top: 0px;
    left: 0px;
    z-index: 99999;
}

.loader {
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    margin: 23% auto 0 auto;
    font-size: 12px;
}

.spinner {
    border: 2px solid #eeeeee;
    font-size: 40px;
    width: 1em;
    height: 1em;
    border-radius: .5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

.spinner {
    border-top-color: #417b03;
}
<div class="mask" style="display: block;">
  <div class="loader">
    <div class="spinner"></div>
     Procesando...
  </div>
</div>

1 respuesta 1

1

Puedes crear una animación de CSS usando @keyframes donde 0% es el inicio de la animación y 100% es el estado final de la misma, y la propiedad que vamos a animar es transform: rotate()

Una vez creada la animación puedes asignarla al evento usando la propiedad animation cuyo primer parámetro es el nombre que has dado a la animación seguido del tiempo de duración, el tipo de animación y el loop que en este caso lo haremos infinite.

Puedes ver mucha más información en Usando animaciones CSS

Ejemplo funcional

.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #fff;
    top: 0px;
    left: 0px;
    z-index: 99999;
}

.loader {
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    margin: 23% auto 0 auto;
    font-size: 12px;
}

.spinner {
    border: 2px solid #eeeeee;
    font-size: 40px;
    width: 1em;
    height: 1em;
    border-radius: .5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-animation: rotar 1s linear infinite;
    -moz-animation: rotar 1s linear infinite;
    animation: rotar 1s linear infinite;
}

.spinner {
    border-top-color: #417b03;
}

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

  100% {
    transform: rotate(360deg);
  }
}
<div class="mask" style="display: block;">
  <div class="loader">
    <div class="spinner"></div>
     Procesando...
  </div>
</div>

1
  • 1
    Hola @CamiloVasquez gracias, es fantástico :)
    – Pedro
    Commented el 20 dic. 2017 a las 2:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.