WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Fragmento de animación de carga de CSS
35
ByBy.inc
Abrir en el editor
Publica tu código
Recomendado
23 May 2025
icono de carga 2
24 March 2025
Un código de smartarray391
4 July 2025
Clon de Spotify: reproductor de música web
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 { width: 80px; height: 80px; background-color: #fff; border-radius: 50%; animation: loading-animation 2s linear infinite; } @keyframes loading-animation { 0% { transform: scale(1); opacity: 1; } 25% { transform: scale(1.1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 0.25; } 75% { transform: scale(1.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } div.animation-container::before { width: 100%; height: 100%; background: radial-gradient(hotpink, #f6f6f6); transform: scale(0); animation: expand 2s linear infinite; } @keyframes expand { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(0.5); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } 75% { transform: scale(1.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 0; } } div.animation-container::after { width: 100%; height: 100%; background: radial-gradient(hotpink, #f6f6f6); transform: scale(0); animation: pulsate 2s ease-in-out infinite; z-index: 2; } @keyframes pulsate { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes loading-animation { 0% { transform: scale(1); opacity: 1; } 25% { transform: scale(1.1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 0.25; } 75% { transform: scale(1.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */