DEV Community

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

Posted on β€’ Originally published at florin-pop.com

5 1

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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay