How To Create A Dynamic Progress Bar With JavaScript And Style It With CSS

If you're looking to create a simple, dynamic progress bar, I'll show you how with this simple tutorial using JavaScript and CSS!

The Demo:

Loading . . .

HTML:

<table style="max-width:728px;" width="100%" align="center">
<tr>
<td width="100%">
<div id="ProgressBar"><div id="BarLoading" class="BarFontNumber">Loading . . .</div></div>
</td>
</tr>
<tr>
<td width="100%">
<button onclick="move()" class="ClickButton1" >Click Me</button>
</tr>
</table>

CSS:

<style>

#ProgressBar {
width: 100%;
background-color: #dfdfdf;
-webkit-border-radius: 7px;
border-radius: 7px;
}

#BarLoading {
width: 30%;
height: 30px;
background-color: #777;
-webkit-border-radius: 7px;
border-radius: 7px;
text-align: left;
padding-left:10px;
}

.BarFontNumber {
font-weight: bold;
height: 30px;
color:white;
font-size:16px;
line-height: 30px;
}

.ClickButton1 {
min-width:125px;
background-color: #444;
-webkit-border-radius:7px;
border-radius: 7px;
text-align: left;
padding:5px;
color:#ffffff;
text-align:center;
font-size:16px;
}

</style>

JavaScript:

<script>
function move() {
var elem = document.getElementById("BarLoading");
var width = 30;
var id = setInterval(frame, 20);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
</script>

If you enjoyed this quick overview on how to create a dynamic progress bar leave a comment below!

If you're looking for more information on this topic visit: w3schools.com!