HOW TO CREATE A CUSTOM PROGRESS BAR

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.

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!

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.

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!