Code a responsive step progress bar with HTML, CSS, & JavaScript
In this tutorial we’ll be creating a responsive step progress bar. These are commonly used when a large form is split into several steps. They let the user know how much of the form they have completed and how much remains. Here’s what the completed progress bar will look like: Let’s get started by creating the HTML markup:
You can easily add more steps here if required and the progress bar will remain responsive and functional. We’ll also need some buttons to control the progress through the steps as follows:
This increases or decreases the active count based on the button clicked. It also prevents the active count from going higher or lower than the number of steps. We’re also calling a updateProgress function which looks like this:
constupdateProgress=()=>// toggle active class on list itemssteps.forEach((step,i)=>if(iactive)step.classList.add("active");>elsestep.classList.remove("active");>>);// set progress bar widthprogressBar.style.width=((active-1)/(steps.length-1))*100+"%";// enable disable prev and next buttonsif(active===1)progressPrev.disabled=true;>elseif(active===steps.length)progressNext.disabled=true;>elseprogressPrev.disabled=false;progressNext.disabled=false;>>;
Loops through each of the steps and toggles the active class.
Set’s the progress bar width as a percentage based on the active and total steps.
Disables the appropriate button when the active step is either the first or last step.
Now we just need to add some CSS to see the progress bar in action:
#progressposition:relative;margin-bottom:30px;>
Relative positioning so we can use absolute position on the children elements.
Styles active steps border and background color to match the progress bar.
That’s all for this tutorial, you should now have a working responsive step progress bar that can be customised to suit your needs. As always you can find the full source code used in this tutorial on Github.
Easily Make A Progress Bar With HTML, CSS, And Javascript
Ready to build a simple progress bar CSS animation to indicate how much of a page is left for viewing?
I keep telling DM that trying to make sense of my personal finances was possibly one of the most inspiring endeavors.
Not only did I come upon a rather chic link hover animation while browsing various CD rates on NextAdvisor, but also a dashing progress bar 🙌
As a user, I’m not too picky about whether or not my progress on a page is displayed.
However, there are cases when I’m reading an article (especially when it’s about taxes and finances) and would like to know how much more there’s left so I can decide whether to bail entirely or continue reading.
Don’t judge, at least I’m trying 👉 👈
Anyways a progress bar is perfect for such cases. In itself, as a component, a progress bar doesn’t occupy too much virtual real estate.
If it’s not ringing a bell, a progress bar is typically used for reading material like blog posts, articles, and general long-ish bits of information.
It’s simple in its premise and relatively easy in implementation with a tiny bit of calculation using JavaScript.
We’ll be using HTML, CSS, and JavaScript in this project. Without further adieu, let’s build a progress bar animation.
Setting up a mock scrollable webpage
To start, a scrollable page is necessary because a progress bar measures progress over lengthy content.
This mock webpage will be super simple with three components:
We’ll tackle the navbar and content in this step – the progress bar is next.
Recreating the navbar
Since this isn’t a how-to-build-an-HTML-wepage-from-scratch project, I opted for reusing the navbar code from How To Build An Easy Animated Hamburger Menu.
For anyone looking to learn how to build an HTML webpage from scratch, check out How To Create An HTML Project For Beginners (guided tutorial).
All I did was copy the necessary HTML, CSS, and JavaScript code.
It’s by no means perfect – a couple of adjustments need to be made – but saves us a ton of time.
Then proceed to add the main content. I place this in a container with an id of content.
This Is How To Comment In HTML, CSS, And JavaScript
It took us one month to make our way back to the US dear fans but we eventually found our way.
The break was definitely necessary.
I was getting older by the day working my expensive hair off my head. By that point, I was producing less content than ideas.
To reduce my stress, we took a little vacation to Eastern Europe and settled for a strange mix of tours in Greece.
These were local tours — everything said and done was in Greek. Can’t say I was fully aware of this when reserving the darn things.
There were lots of half-assed translations on my end to DM (who insists he speaks Greek because he was born there but understands absolutely nada).
. . .
I confess to having had a.
Click for full post
Note: The above is only part of the actual content code – you can find the entire markup on this project’s pen.
Now, don’t you worry, things won’t appear problem-free. Adding that content element throws things off which is quite normal when reusing code.
Styling what we have so far
Before moving on to the progress bar, let’s adjust and add some styles.
On the nav element, I change the background color while for #content I use position to correct the skewed appearance.
Notice that on scroll there’s an element stacking issue as the content is visible through the nav. This isn’t the behavior we’re aiming for.
Next comes #progress which acts as the fill. Here I’ll set dimensions for height and width by giving #progress a display of inline-block.
The width is supposed to be dynamic as it depends on a user’s progress down the page. However, we’ll start with a static width to see what we’re creating.
Woah! What the heck is going on? – DM
Things aren’t looking too hot as DM kindly pointed out. Our “fill” is way outside its container 😳
There are two fixes and I’ll go over both of them. One is super easy but requires we change the display of #progress whereas the other is more nuanced though demands no change.
Easy solution: Change the display
To correct the odd display of #progress simply change the display from inline-block to block.
Your CSS will look like so:
Note: We add a CSS transition for a smooth animation when we make the fill dynamic.
Challenge solution: Work with display inline-block
As a more nuanced solution based on the display we initially set on #progress, we’ll be reworking some span tag defaults.
First, let’s identify what’s going on.
Why is the span outside of its parent wrapper when setting the display to inline-block?
It took some scavenging to figure out the answer to this 😔
Setting the display to inline-block for the child span requires overriding the default baseline.
What’s the default baseline of span you ask?
Well, we can see it in action if we add text in the span tags.
Take a careful look and notice the baseline of the text aligns with the empty span alignment!
Meanwhile, #progress is finally where we actually want it to be located.
In a nutshell, the empty span aligns with the baseline (i.e. the bottom margin of its containing block) because span is technically an inline element.
How to push a span with display inline-block to the top of the parent
The distortion we see is the effect of mutating an element’s inherent behavior.
This of course doesn’t mean we can’t change things and make them work how we want them to work.
Since the baseline of an empty span defaults to the bottom margin but we want the span on the top margin, use vertical-align: top .
How to fill the progress bar
We’re almost done – all that’s left is making the fill of the progress bar dynamic based on user scroll.
I’ll be using JavaScript to determine a user’s scroll and the scrollable area of the screen.
Fair warning, some basic maths is involved 🤓
Begin by defining the variables:
const main = document.querySelector('main'), progressBar = document.querySelector('#progress');
Then let’s listen for the scroll event because our progress bar actions depend on a user’s scroll.
document.addEventListener('scroll', () => < // The rest of the code goes in here >
Note: The rest of the code goes inside the callback of the scroll event listener!
Deciding among scrollHeight, offsetHeight, and clientHeight
There are various heights JavaScript can give us in our document.
To wrap my head around it all, I console-logged the three heights because I’m a visual person.
When scrolled to the very end of the document, scrollY doesn’t capture the part of the document that is still visible – that’s what clientHeight measures.
So a fully scrolled element has a scrollHeight that is equal to scrollY (what’s been scrolled) plus clientHeight (what’s visible).
What’s left is setting the width of #progress to the percent scrolled variable so progressBar.style.width = pctScrolled + ‘%’ .
Thanks to the transition we set earlier in our CSS, the progress fill flows smoothly as the user scrolls across the page.
A simple stylish progress bar is all complete! Find the full source code on GitHub.
It only took some exceptional mathematical and artistic prowess but we made it all right.
You can customize and implement it on so many things, I’m buzzing with excitement at the very thought of it.
Or it could be I need a serious break – those height schemas just 🤯
