WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animation de la barre de chargement CSS
785
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
26 October 2024
Plans Bot (page d'accueil)
4 September 2025
Extrait HTML d'animation CSS Circle
13 June 2025
Effet de survol des cartes
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) */