DEV Community

loading...
Cover image for Weekly Coding Challenge - Week #14 - Progress Bar

Weekly Coding Challenge - Week #14 - Progress Bar

florinpop17 profile image Florin Pop Originally published at florin-pop.com ใƒป1 min read

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! ๐Ÿ˜‡

Discussion (3)

pic
Editor guide
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 Author

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