WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Página de carga animada
2226
codex
Abrir en el editor
Publica tu código
Recomendado
22 August 2025
Comentario de marcador de posición de código HTML
20 September 2025
Demostración de girasoles, luciérnagas y fuegos artificiales animados con CSS
21 October 2024
Reglas de contraseña + alternar componentes web
HTML
Copy
CSS
Copy
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); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */