20 de agosto de 2014

7 animaciones de carga creadas en CSS

Introducción

Hoy en día es común que la interfaz, en este caso una web, se encargue de toda la lógica pidiendo datos al servidor sin recargar la página. Para esos tiempos de espera que sean visibles, aquí tienes 7 animaciones realizadas 100% en CSS. Di adiós al aburrido texto de "Cargando...". Mediante el uso de keyframes (tal como vimos en este artículo), podemos animar elementos de manera muy sencilla.

@keyframes loading {
  0%, 100% {
    margin-top: 25px;
    height: 10px;
  }

  50%{
    margin-top: 0px;
    height: 50px;
  }
}

ul {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 5px;
}

li {
  background-color: var(--color-primary);
  width: 10px;
  height: 10px;
  animation: loading 1s ease-in-out infinite;
}

li:nth-child(1) {
  animation-delay: 0s;
}

li:nth-child(2) {
  animation-delay: -0.2s;
}

li:nth-child(3) {
  animation-delay: -0.4s;
}

li:nth-child(4) {
  animation-delay: -0.6s;
}

li:nth-child(5) {
  animation-delay: -0.8s;
}

Output

Double spin

HTML
CSS

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

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

div {
  border: 6px solid var(--color-background);
  border-radius: 100%;
  border-top-color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  width: 50px;
  height: 50px;
  animation: loading 1.5s infinite linear;
}

Output

Flip

HTML
CSS

@keyframes loading {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: perspective(120px) rotateX(180deg) rotateY(0deg);
  }

  100% {
    transform: perspective(120px) rotateX(180deg) rotateY(-180deg);
  }
}

div {
  background-color: var(--color-primary);
  width: 50px;
  height: 50px;
  animation: loading 2s infinite ease-in-out;
}

Output

Sound

HTML
CSS

@keyframes loading {
  0% {
    opacity: 0.35;
    height: 8px;
  }

  100% {
    opacity: 1;
    height: 50px;
  }
}

ul {
  display: inline-flex;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  height: 50px;
  list-style: none;
  gap: 2px;
}

li {
  background: var(--color-primary);
  width: 5px;
  height: 8px;
  animation: loading 0ms -800ms linear infinite alternate;
}

li:nth-child(1) {
  animation-duration: 405ms;
}

li:nth-child(2) {
  animation-duration: 477ms;
}

li:nth-child(3) {
  animation-duration: 456ms;
}

li:nth-child(4) {
  animation-duration: 402ms;
}

li:nth-child(5) {
  animation-duration: 472ms;
}

li:nth-child(6) {
  animation-duration: 452ms;
}

li:nth-child(7) {
  animation-duration: 415ms;
}

li:nth-child(8) {
  animation-duration: 456ms;
}

li:nth-child(9) {
  animation-duration: 497ms;
}

li:nth-child(10) {
  animation-duration: 440ms;
}

Output

Portal

HTML
CSS

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

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

div {
  border: 6px dotted var(--color-primary);
  border-radius: 100%;
  width: 50px;
  height: 50px;
  animation: loading 2s infinite linear;
}

Output

Bar

HTML
CSS

@keyframes loading {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

.wrapper {
  border: 3px solid var(--color-opposite);
  padding: 4px;
  width: 160px;
  height: 16px;
}

.space {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.loading {
  position: absolute;
  background-color: var(--color-primary);
  width: 100%;
  height: 100%;
  animation: loading 5s steps(40) infinite;
}

Output

Vortex

HTML
CSS

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

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

ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 5px solid var(--color-background);
  border-radius: 100%;
}

li:nth-child(1) {
  margin: -30px 0 0 -30px;
  border-top-color: var(--color-primary);
  width: 60px;
  height: 60px;
  animation: loading 3s infinite linear;
}

li:nth-child(2) {
  margin: -20px 0 0 -20px;
  border-top-color: var(--color-primary);
  width: 40px;
  height: 40px;
  animation: loading 2s infinite linear;
}

li:nth-child(3) {
  margin: -10px 0 0 -10px;
  border-top-color: var(--color-primary);
  width: 20px;
  height: 20px;
  animation: loading 1s infinite linear;
}

Output

Puedes apoyarme para que pueda dedicar aún más tiempo a escribir artículos y tener recursos para crear nuevos proyectos. ¡Gracias!

Contribuir

Compartir