Is this a styled element or a custom div?

Both versions are generated. 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.

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

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

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

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%.

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.

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

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%.

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.