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.
How does it work?
This article is broken into 3 stages:
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.
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!
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!