Progress ring

Make it fit your project.

Draw a circle with a known circumference and animate its stroke-dashoffset to reflect real completed work. Use round caps, a fixed start angle, and an accessible progressbar value. If total work is unknown, use an indeterminate label instead of fabricating a percentage.

Build and check.

1. Confirm the supplied content, target environment, and required assets before implementing.
2. Draw a circle with a known circumference and animate its stroke-dashoffset to reflect real completed work. Use round caps, a fixed start angle, and an accessible progressbar value. If total work is unknown, use an indeterminate label instead of fabricating a percentage.
3. Implement idle, active, keyboard, touch, reduced-motion, and failure states as relevant.
4. Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.

Know the limits.

• Progress must reflect supplied data. Never use a fake loading loop for completed work.
• The prompt guides a coding agent; output quality depends on its implementation and review.

Want us to build it?

Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.