WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animazione della barra di caricamento CSS
520
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
17 May 2025
Un codice di Maxi-Digital
10 April 2025
Un codice di cleanbug411
10 August 2025
Struttura di animazione a blocchi CSS
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) */