WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animation de la barre de chargement CSS
521
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
7 December 2024
Un code par securecode394
10 July 2025
Exemple d'écran de chargement animé CSS HTML
20 August 2025
Modèle HTML de blog de conception moderne
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) */