CSS Loader Spinner: HTML simple

1,216 alejandrokundrah

Abrir en el editor Publica tu código

Recomendado

20 February 2026

Plantilla HTML de contador de clics del mouse

20 August 2025

Plantilla HTML CSS para formulario de inicio de sesión y registro

19 January 2026

Código fuente HTML del juego Little Alchemy 2

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