Página de carga animada

1930 codex

Abrir en el editor Publica tu código

Recomendado

16 October 2025

Animación de carga CSS con efectos de fragmento

21 January 2025

Inicio de CodePen Estrellas y velocidad Warp

17 August 2024

Juego de Sudokus

HTML

CSS

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:#212121;
  overflow:hidden
}
.loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.loader div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #c517f0;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loader div:nth-child(1) {
  left: 8px;
  animation: flip1 0.6s infinite;
}

.loader div:nth-child(2) {
  left: 8px;
  animation: flip2 0.6s infinite;
}

.loader div:nth-child(3) {
  left: 32px;
  animation: flip2 0.6s infinite;
}

.loader div:nth-child(4) {
  left: 56px;
  animation: flip3 0.6s infinite;
}

@keyframes flip1 {
  0% {
    transform: scale(0);
  }

100% {
    transform: scale(1);
  }
}

@keyframes flip3 {
  0% {
    transform: scale(1);
  }

100% {
    transform: scale(0);
  }
}

@keyframes flip2 {
  0% {
    transform: translate(0, 0);
  }

100% {
    transform: translate(24px, 0);
  }
}

Recomendado

Animación de carga CSS con efectos de fragmento

Inicio de CodePen Estrellas y velocidad Warp

Juego de Sudokus

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS