Challenge

Animated Progress Bar

Easy

css
animation

Make a progress bar: a track with a fill that slides from empty to a target percentage when the page loads, and a text label showing the current percentage.

Notes:

The starter has .track, .fill (#fill) and #label, which starts at 0%. Pick any target you like.
The label should count up as the fill grows, so the number and the bar finish at about the same time.
If the fill jumps instead of sliding, set its width a moment after load. A short setTimeout does it.

Check your work against

The bar visually fills to a specific percentage
The fill animates smoothly (a CSS transition), not an instant jump
The percentage is shown as text and updates as the bar fills

No automatic grading

Check your work against the list above, then compare it with the solution preview.

Tab indents. Press Esc, then Tab to leave the editor.

Live preview

Starter loaded. The preview updates as you type.