Inicia sesión




Haciendo un spinner con CSS

Haciendo un spinner con CSS Los spinners, esos típicos símbolos que nos muestran que estamos a la espera de algún proceso de carga, han sido durante mucho tiempo imágenes tipo GIF. Pero CSS le ha comido casi todo el terreno. Con las propiedades animation, transform y keyframes, las posibilidades son infinitas.En este tutorial vamos a como construir un spinner muy básico, pero que a mí me gusta muchísimo, consistente en un círculo incompleto que gira sin parar. A partir de este ejemplo, espero que os hagáis una idea de lo fácil que es.

Pasos


Crear el círculo incompleto


Si recordamos como crear un círculo, la idea consiste básicamente en crear una caja cuadrada con el ancho y el alto que queramos y luego aplicar un border-radius del 50% para que los bordes se curven hasta formar el círculo.

Cada uno de los cuatro bordes de la caja inicial, es ahora un 25% del borde del círculo. Si le aplicamos un color diferente a uno de los bordes, conseguimos el círculo incompleto.

En este ejemplo, he elegido un mismo color para los cuatro bordes, pero el izquierdo lo he hecho semi-tranparente reduciéndole la opacidad; esto le dará un toque más de animación si utilizamos el spinner sobre un fondo no plano:

Spinner con círculo incompleto

Y el CSS:
.spinner, .spinner:after{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: block;
}
.spinner {
  background-color: transparent;
  border-top: 5px solid rgb(66,139,202);
  border-right: 5px solid rgb(66,139,202);
  border-bottom: 5px solid rgb(66,139,202);
  border-left: 5px solid rgba(66,139,202,.2);
}

Hacerlo girar


Aplicando la propiedad animation, podemos hacer girar al círculo. Nos bastará definir una transformación de rotación de 360º en una regla @keyframes y hacerla que se repita indefinidamente.

El CSS anterior quedaría:
.spinner,.spinner:after{
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
 }
.spinner {
    background-color: transparent;
    border-top: 5px solid rgb(66,139,202);
    border-right: 5px solid rgb(66,139,202);
    border-bottom: 5px solid rgb(66,139,202);
    border-left: 5px solid rgba(66,139,202,.2);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: .8s;
    animation-name: spinner-loading
 }
@keyframes spinner-loading{
  0% {
      transform: rotate(0deg)
  } to {
      transform: rotate(1turn)
  }
}
Y el resultado es este...

De una forma muy similar, y con un poco de imaginación, se pueden hacer multitud de spinners, algunos tan clásicos como los que se ven continuación:

Y el resultado es este...

Te sugiero seguir leyendo...


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-04
  • Categorias: Diseño Web CSS3 WebSite webmasters Noticias Tutorial

Haciendo un spinner con CSS
Haciendo un spinner con CSS Haciendo un spinner con CSS...
Tutoriales en linea




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Go4Rex El Salvador es la mejor opción para una experiencia comercial perfecta

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-08
  • Categorias: criptomoneda Forex Noticias Tutorial

Que es marketing de eventos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-07
  • Categorias: Post Patrocinados Coobis Marketing Noticias Tutorial

Cómo analizar el rendimiento del sitio web con Lighthouse

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-04-05
  • Categorias: Diseño Web WebSite webmasters Optimizacion Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial