WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animação da barra de carregamento CSS
524
ByBy.inc
Abrir no Editor
Publique Seu Código
Recomendado
18 June 2025
API para desenvolvedores: construir e integrar | DevFlow
10 September 2024
PÁGINA DE CARREGAMENTO NETFLIX
2 October 2025
Trecho de animação de carregamento 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) */