Loader innovador usando HTML y CSS

 HTML:

<div class="loader">

  <div class="inner one"></div>

  <div class="inner two"></div>

  <div class="inner three"></div>

</div>

CSS:

.loader {

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 60px;

  height: 60px;

}

.inner {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 15px;

  height: 15px;

  border-radius: 50%;

  animation-duration: 1s;

  animation-iteration-count: infinite;

  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

}

.one {

  transform: translate(-30px, -30px);

  background-color: #ffa500;

  animation-name: move-one;

}

.two {

  transform: translate(0, -30px);

  background-color: #008000;

  animation-name: move-two;

}

.three {

  transform: translate(30px, -30px);

  background-color: #0000ff;

  animation-name: move-three;

}

@keyframes move-one {

  0% {

    transform: translate(-30px, -30px);

  }

  25% {

    transform: translate(0, -30px);

  }

  50% {

    transform: translate(30px, -30px);

  }

  75% {

    transform: translate(0, -30px);

  }

  100% {

    transform: translate(-30px, -30px);

  }

}

@keyframes move-two {

  0% {

    transform: translate(0, -30px);

  }

  25% {

    transform: translate(30px, -30px);

  }

  50% {

    transform: translate(-30px, -30px);

  }

  75% {

    transform: translate(30px, -30px);

  }

  100% {

    transform: translate(0, -30px);

  }

}

@keyframes move-three {

  0% {

    transform: translate(30px, -30px);

  }

  25% {

    transform: translate(-30px, -30px);

  }

  50% {

    transform: translate(0, -30px);

  }

  75% {

    transform: translate(-30px, -30px);

  }

  100% {

    transform: translate(30px, -30px);

  }

}

En este ejemplo, hemos creado un loader con tres puntos que se mueven en diferentes direcciones para crear un efecto de carga animado. La animación se realiza mediante el uso de la propiedad animation de CSS y la función cubic-bezier para crear una curva de aceleración personalizada.

Puedes personalizar los colores y los movimientos de los puntos según tus necesidades y preferencias. Además, puedes ajustar el tamaño del loader cambiando los valores de width y height en la clase .loader.

Espero que este ejemplo te sea útil para crear tu propio loader innovador en HTML y CSS para tu página web.