DEV Community

loading...
Cover image for HOW TO CREATE A CUSTOM PROGRESS BAR

HOW TO CREATE A CUSTOM PROGRESS BAR

pflash profile image Precious adeyinka ・2 min read

There wasn't a native way to create progress bars out the box with HTML, not until the HTML5 specification was released and new elements, Modern components and APIs was bundled in.

Before that, programmers have discovered several beautiful hacks to this problem, and today I will be showing you a very common hack also using purely div elements, a few CSS rules and javascript for the interactive animation.

How does it work?

This article is broken into 3 stages:

The HTML:

This section defines the structure for the elements on the page.
The HTML consists of 3 parent elements.

The first element is a div that defines a container for the percentage value of the progress bar, another option is to make this appear inside the progress bar itself.

The second element is also a div (but a super div), which is where the progress bar is housed. It consists of 2 div elements in total. The first one is the bar container and the inner one is the bar itself.

The third element is a button element, that we will use to increment the progress bar by 10 percent(10%) on every click.

Alt Text

The CSS:

This section defines the presentation and stylize the HTML elements.
The code itself is commented and there is really nothing much to say here if you already know how to read CSS just do your thing!

Alt Text
Alt Text
Alt Text

The Javascript:

The javascript is a 14 lines long code base and all it does is to fetch elements from the DOM and attach an event listener to the button element, this will, in turn, add a 10% increase to the bar element every time the button is clicked. It also includes a condition that will reset the bar width to 0% when the count reaches 100%. Ohh! and then it updates the text component with the current percentage value.

Alt Text

Just before I forget, of what use is an article like this without a demo, so here you go:

Disclaimer: This post wasn't intended to anger anyone, if you are a PRO, you are reading the wrong article, this is for the beginners, so do a good thing by sharing. Thank you!

Discussion (6)

pic
Editor guide
Collapse
lautarolobo profile image
Collapse
pflash profile image
Precious adeyinka Author

Thank you β˜ΊπŸ™

Collapse
calvinoea profile image
Calvin

This is great!

Collapse
pflash profile image
Precious adeyinka Author

Thank youπŸ™β˜Ί

Collapse
prince_irap profile image
Prince Bright iRAP

Thanks for sharing..

Collapse
pflash profile image
Precious adeyinka Author

You are welcome :)!