Skip to content
Sign upLog in
← Back to Community

Creating a Progress Bar

Profile icon
NoNameByProgram

Heya there! HTML may seem very... well... how do I say this? I guess I could say it's easy, but JavaScript is a "whole new level" to some newbies. So, here is a guide to creating a great progress bar!

When creating a progress bar, we may think of this:

Screen Shot 2020-10-18 at 4.53.32 PM

Which seems to make sense. But this will be basic (if you're a master please don't judge :( ).

HTML

When we do this, add this to the body, which will insert an progress bar.

<div id="progress-bar"> <div id="progress"></div> </div>

We're done our HTML setup! So far, it looks like basically nothing. Great start (don't sue me please)!

CSS

CSS is a styling language. This may actually help us. So, just copy and paste this code into your style.css file and I will break it down later.

#progress-bar { border:2px solid orange; border-radius:9px; width:100%; height:10px; } #progress { background-color:orange; border-radius:9px 0px 0px 9px; width:0%; height:10px; }

border - makes a border for the element.
border-radius - lowers the border roughness by the amount.
width - changes the width.
height - changes the height.
background-color - changes the background color of the element.

Explained? Good!

The Main Course - JS

So, here it is folks, the main dish! Javascript! Just paste this code:

window.onload = function(){ // code here pls i beg u }

And we will put all the code in the function!

So, we will first define the progress element.

const progress = document.getElementById("progress");

Done, right? Nope. Add this code:

function change_progress(progress_change) { if (progress_change > 100) { progress_change = 100 } progress.style.width = progress_change.toString()+"%"; }

This code creates a function and takes an argument called progress_change. Then it changes the progress variable's width style to whatever the progress_change value is. The if statement checks if the progress_change is higher than 100. If it is, it gets reset back to 100.

Now, let's call the function.

change_progress(20);

Now the progress has changed to 20%! Congrats! Now, let's try to make it increase every second. First, comment the last line of code then do this:

var progress_changer = 0; setInterval(function(){ progress_changer++; change_progress(progress_changer); }, 1000);

What this does is that it creates a variable named progress_changer with a value of 0. setInterval does a function every 1000 milliseconds (1 second). This function adds progress_changer by 1, then changes the progress.

Done!

Now brag to your friends about your definitely not copy and pasted code! Oh, here is an example: https://repl.it/@NoNameByProgram/ProgressBar

Voters
Profile icon
lightningrock
Profile icon
DynamicSquid
Profile icon
NoNameByProgram
Comments
hotnewtop
Profile icon
lightningrock

Cool! BTW You can use the progress HTML tag.

Profile icon
NoNameByProgram
Profile icon
lightningrock
Profile icon
NoNameByProgram

@lightningrock
lmao
the point of this post is to get beginners to have a touch of js

anyway, thanks for the link!

Profile icon
lightningrock

np, BTW what do you mean

touch of js

you still need js with the progress tag! it's just why use CSS to make something when you can do it with HTML?


@NoNameByProgram

Profile icon
NoNameByProgram

@lightningrock
eh, forget it
it wasn't that important anyway