About CSS Progress Bar

Gradient progress bar with animated shimmer — accessible. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

• Frontend developers building accessible progress indicators for uploads
• Designers prototyping loading states with animated shimmer effects
• Dashboard builders creating visual progress tracking for multi-step workflows
• UI engineers defining progress bar component styles for design systems

Tips

• The animated shimmer effect draws attention to active progress indicators
• Customize gradient colors to match your brand's primary palette
• Add aria-valuenow and aria-valuemax attributes for screen reader accessibility

Fun Facts

• Progress bars were first used in computing by Mitchell Model in his 1979 Ph.D. thesis, but they became mainstream with early Macintosh file copy dialogs in 1984.
• Studies show that progress bars with animated shimmer effects are perceived as 16% faster than static bars showing the same progress, even when actual time is identical.
• Brad Myers' 1985 paper 'The Importance of Percent-Done Progress Indicators' was the first academic study proving that progress feedback reduces perceived wait time by up to 40%.

FAQ

Is this a styled <progress> element or a custom div?

Both versions are generated. <progress> has native ARIA semantics; div-based gives more styling flexibility. The tool comments both.

Can the progress animate?

Yes — a shimmer animation and a smooth width transition when the value changes. Both are gated behind prefers-reduced-motion.

What about indeterminate progress?

For unknown durations, the tool includes a `@keyframes` that moves a gradient stripe across the bar. Use when you can't measure remaining work.

Does it show a numeric label?

Optional — toggle to include a `<output>` element that shows the percentage. Useful for longer operations.