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!






La importancia del video en la experiencia del usuario para tu página web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-13
  • Categorias: WebSite Noticias Tutorial

Seguridad en Internet

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-13
  • Categorias: Noticias Tutorial Google Internet Red Claves Wifi Seguridad

Análisis De las causas y consecuencias de los ataques de hackers

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-13
  • Categorias: Internet Seguridad hacker Noticias Tutorial Informatica

Access desde cero

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-06-14
  • Categorias: Herramientas Ofimaticas Microsoft Cursos 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