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


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

Posted on by:

florinpop17 profile

Florin Pop


Purple Popper ๐Ÿ’œ, Coding enthusiast ๐Ÿ’ป, YouTuber youtube.com/florinpop ๐Ÿ˜, Streamer twitch.tv/florinpop17 โŒจ - Discord discord.gg/qSse3Ey ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ


Editor guide

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

<progress> on MDN


Yup, but how much customization does it allow?


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