WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Estrutura HTML da barra de progresso animada em CSS
377
ByBy.inc
Abrir no Editor
Publique Seu Código
Recomendado
6 August 2025
Modelo HTML para site de academia de ginástica
5 October 2025
Trecho de animação de carregamento CSS
27 October 2024
Site de jogo crackeado Público Qualquer um pode postar
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #242734; 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%); width: 100%; height: 50%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bar { width: 100%; background-color: #546E7A; height: 3px; border-radius: 5px; position: relative; } .progress { height: 4px; background-color: #F8F8F2; width: 99%; left: 1px; position: absolute; top: 100%; border-radius: 5px; animation: sat_loading 1.2s linear infinite; } @keyframes sat_loading { 0% { width: 0%; } 99% { width: 99%; } 100% { width: 0%; } } .figure { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; animation: sat_hop 2s infinite alternate; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */