DEV Community

Cover image for Weekly Coding Challenge - Week #14 - Progress Bar
Florin Pop
Florin Pop

Posted on • Originally published at florin-pop.com

Weekly Coding Challenge - Week #14 - Progress Bar

Theme of the week: Progress Bar

Description

A progress bar is used to show how far a user action is still in process until it's completed. A good example is a download progress bar which shows you how much of the file is downloaded already (or it could also be an upload progress bar if you upload files πŸ™‚).

Useful Resources

Check out my submission for this challenge: Custom Progress Bar with HTML/CSS and a little bit of JS πŸ˜ƒ.

See all the submissions in this Codepen Collection.

Are you interested in joining the challenge? πŸ˜ƒ Read The Complete Guide to find out how. Don't forget to share your creation! πŸ˜‰

Happy Coding! πŸ˜‡

Top comments (3)

Collapse
 
shgysk8zer0 profile image
Chris Zuber

Well, there's <progress value="70" max="100">70%</progress>.

<progress> on MDN

Collapse
 
florinpop17 profile image
Florin Pop

Yup, but how much customization does it allow?

Collapse
 
shgysk8zer0 profile image
Chris Zuber

Pretty much anything you can think of. Made a demo with customization, but can't check IE / Edge on Linux.

codepen.io/shgysk8zer0/details/dBGMLm