WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animación de carga CSS Estructura HTML
48
ByBy.inc
Abrir en el editor
Publica tu código
Recomendado
18 September 2025
Generador de texto a flor: Arte de letras animadas
28 September 2025
Plantilla HTML para tienda de zapatillas de deporte de comercio electrónico
18 August 2024
Tableta de dibujo
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background:url("./thumb.jpg") no-repeat center center; background-color: black; background-size: cover; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 25%; max-width: 75%; width: 75%; height: 25%; top:15%; overflow-y: hidden; box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background: transparent; } .loading-element { position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: #E6DB74; animation: loading-animation 1s linear infinite; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 50px rgba(0, 0, 0, 0.5), 0 0 100px rgba(255, 255, 255, 0.5); } @keyframes loading-animation { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } @keyframes fragment-disappearance { 0% { opacity: 1; } 100% { opacity: 0; } } .fragment-1 { position: relative; width: 80px; height: 100px; border-radius: 10px; background-color: #66D9EF; transform: rotate(25deg); animation: fragment-animation 3s linear infinite; } @keyframes fragment-animation { 0% { transform: rotate(25deg) scale(1); bottom: -100px; } 20% { transform: rotate(25deg) scale(1.5); bottom: 150px; } 40% { transform: rotate(25deg) scale(1); bottom: -100px; } 60% { transform: rotate(25deg) scale(0.5); bottom: -150px; } 100% { transform: rotate(25deg) scale(1); bottom: -100px; } } @keyframes fragment-disappearance { 0% { opacity: 1; } 100% { opacity: 0; } } .fragment-2 { position: relative; width: 120px; height: 80px; border-radius: 10px; background-color: #F92672; transform: rotate(-30deg); animation: fragment-animation-2 2s linear infinite; } @keyframes fragment-animation-2 { 0% { transform: rotate(-30deg) scale(1); bottom: -80px; } 20% { transform: rotate(-30deg) scale(1.2); bottom: 50px; } 40% { transform: rotate(-30deg) scale(1); bottom: -80px; } 60% { transform: rotate(-30deg) scale(0.8); bottom: -130px; } 100% { transform: rotate(-30deg) scale(1); bottom: -80px; } } .fragment-3 { position: relative; width: 150px; height: 60px; border-radius: 10px; background-color: #3E8E41; transform: rotate(45deg); animation: fragment-animation-3 4s linear infinite; } @keyframes fragment-animation-3 { 0% { transform: rotate(45deg) scale(1); bottom: -60px; } 25% { transform: rotate(45deg) scale(1.1); bottom: 30px; } 50% { transform: rotate(45deg) scale(1); bottom: -60px; } 75% { transform: rotate(45deg) scale(0.9); bottom: -120px; } 100% { transform: rotate(45deg) scale(1); bottom: -60px; } } .loading-element::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: #E6DB74; animation: fragment-disappearance 5s linear infinite; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */