WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
icono de carga 2
200
ByBy.inc
Abrir en el editor
Publica tu código
¿Necesitas un sitio web?
Recomendado
10 July 2025
Ejemplo HTML de pantalla de carga animada con CSS
19 May 2025
animación moderna
2 June 2025
HORARIO DE EJEMPLO
HTML
Copy
CSS
Copy
*{ margin: 0; padding: 0; } body{ background-color: transparent; width: 100vw; height: 100vh; font-family:'Courier New', Courier, monospace; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .container{ display: flex; width: 40px; height: 20px; align-items: center; justify-content: center; } .circle{ background: red; opacity: 0.95; border-radius: 50%; width: 10px; height: 10px; animation: rotateRed 1.2s linear infinite; } .circle2{ background: cyan; opacity: 0.95; border-radius:50%; width: 10px; height: 10px; mix-blend-mode: darken; animation: rotateCyan 1.2s linear infinite; } @keyframes rotateRed{ 0%,100%{transform: translateX(0);scale: 1;} 10%{scale: 1.15;transform: translateX(20%);} 50%{transform: translateX(100%);} 51%{scale: 1;} } @keyframes rotateCyan{ 0%,100%{transform: translateX(0);scale: 1;} 10%{scale: 0.85;transform: translateX(-20%);} 50%{transform: translateX(-100%)} 51%{scale: 1;} }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */