Animated Progress Bar

Published at 15 Jun 2026

Description
Explains what the challenge is about and what you need to build.

Progress bars are a great way to show loading or completion status. In this challenge, you will build an Animated Progress Bar where you can set a target percentage and animate the fill smoothly.

Create an input field for the percentage, an animate button, and a progress bar that fills with a smooth CSS transition when the button is clicked.

Requirements
Lists the specific elements, IDs, and behaviors your solution must include to pass the tests.

The input field for the target percentage must have ID #input-percent, and should accept values from 0 to 100.
The animation trigger button must have ID #btn-animate.
The filling element inside the progress bar container must have ID #progress-fill.
Clicking the button updates the CSS width of #progress-fill to match the target percentage value.
The progress fill width transition should animate smoothly (e.g. using CSS transition rule transition: width 0.4s ease-in-out).

Example Demo

User Flow

Step-by-step Flow Explanation:

User loads the page: The progress bar is rendered with an empty/default input field and the animate trigger button.
Adjust target value: User inputs a target percentage (e.g., 85) inside the #input-percent field.
Trigger transition: User clicks the #btn-animate button to commit the target value.
Smooth animation: The progress bar fill element (#progress-fill) smoothly animates its CSS width to 85% using pre-configured transition styles.
Verification: The automated test suite executes assertions verifying element existence, correct percentage styling, and active transition properties.

Related UI Challenges

Fixing Bug

Discussion (0)

Join the Discussion

index.html

style.css

script.js

Loading Monaco Workspace...

Live Preview Browser

Tests & Console Output

Click to expand

Test Assertion	Status	Details/Errors
Required DOM Elements exist (#input-percent, #btn-animate, #progress-fill)	Pending	Pending execution
Animate button triggers width updates correctly	Pending	Pending execution
Progress-fill contains smooth CSS transition animations	Pending	Pending execution