WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animación de la barra de carga CSS
522
ByBy.inc
Abrir en el editor
Publica tu código
Recomendado
22 August 2025
Servicios de Diseño Web, Marketing Digital y Vídeo
25 August 2024
Formulario de inicio de sesión de Glassmorphic
20 June 2024
Tarjeta de zapatos
HTML
Copy
CSS
Copy
body { background-color: #F0F2F5; 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: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .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; } .bar { width: 6px; height: 100px; background-color: #0CFF0C; display: flex; /* flex container for centering */ align-items: center; /* verticle centering */ justify-content: center; /* horizontal centering */ position: relative; animation: loadingBar 2s infinite; /* Animate using the loadingBar animation */ } @keyframes loadingBar { 0% { width: 6px; background-color: #0CFF0C; } 50% { width: 90%; background-color: #F07C0C; /* Color shift on progress */ } 100% { width: 6px; background-color: #0CFF0C; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */