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.

Pulse

@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;
}

Double spin

@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;
}

Flip

@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;
}

Sound

@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;
}

Portal

@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;
}

Bar

@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;
}

Vortex

@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;
}

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