WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ejemplo de elemento de carga animado CSS
645
byby.createsite
Abrir en el editor
Publica tu código
Recomendado
6 June 2025
TARJETA DE CONEXIÓN
8 May 2025
botón de escaneo
18 September 2024
Botón de inicio de sesión
HTML
Copy
```html
```
CSS
Copy
/* Base foundation */ * { 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; aspect-ratio: 9/16; } .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; aspect-ratio: 9/16; } /* Layers e motivação emocional */ .loading-element { background-color: #333333; width: 80px; height: 80px; border-radius: 50%; animation: loading-animation 1s linear infinite; position: relative; } @keyframes loading-animation { 0% { transform: scale(0); } 100% { transform: scale(1); } } .layer1 { width: 100%; height: 100%; background-color: #4D4D4D; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s; } .layer1::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #3F3F3F; width: 20px; height: 20px; border-radius: 50%; } /* Micro-detalhes para o replay value */ .layer2 { width: 20px; height: 20px; border-radius: 50%; background-color: #3F3F3F; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); animation: detalhe 2s linear infinite; } @keyframes detalhe { 50% { transform: scale(1); background-color: #666666; } 100% { transform: scale(0); background-color: #3F3F3F; } } /* Interações entre camadas e elementos */ .layer3 { width: 30px; height: 30px; border-radius: 50%; background-color: #2F2F2F; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: interacao 2s linear infinite; } @keyframes interacao { 50% { transform: scale(1); background-color: #777777; } 100% { transform: scale(0); background-color: #2F2F2F; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */