CSS Loader Spinner: HTML simple

1,476 alejandrokundrah

Abrir en el editor Publica tu código

Recomendado

2 September 2025

Ejemplo de animación de fragmento CSS

19 March 2025

Casillas de verificación de sables de luz de Star Wars con CSS3 puro

22 September 2025

Fragmento de animación HTML de Neuron

HTML

CSS

.loader {
  position: relative;
  width: 120px;
  height: 90px;
  margin: 0 auto;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background-color:#111111;

}
.loader:before {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 50px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #cebebe;
  animation: loading-bounce 0.5s ease-in-out infinite alternate;
}

.loader:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 7px;
  width: 45px;
  border-radius: 4px;
  box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2;
  animation: loading-step 1s ease-in-out infinite;
}

@keyframes loading-bounce {
  0% {
    transform: scale(1, 0.7);
  }

40% {
    transform: scale(0.8, 1.2);
  }

60% {
    transform: scale(1, 1);
  }

100% {
    bottom: 140px;
  }
}

@keyframes loading-step {
  0% {
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0),
            0 10px 0 #f2f2f2,
            -35px 50px 0 #f2f2f2,
            -70px 90px 0 #f2f2f2;
  }

100% {
    box-shadow: 0 10px 0 #f2f2f2,
            -35px 50px 0 #f2f2f2,
            -70px 90px 0 #f2f2f2,
            -70px 90px 0 rgba(0, 0, 0, 0);
  }
}