CSS and JavaScript - Progress Bar
Jump to navigation
Jump to search
Contents
About
NOTE: This page is a daughter page of: CSS and JavaScript
A progress or loading bar is a pretty common concept this covers two methods.... one is to create a div in another div, the other (easier) is a progress HTML element.
Progress Bar: Solution 1: Div inside a Div
<style>
.loading-container {
display: inline-block;
height: 16px;
width: 300px;
border: 1px solid #aaa;
background-color: #fafafa;
margin: 2px;
}
.loading-bar {
width: 50%; /* Change this width with JavaScript */
height: 14px;
border: 1px solid #ccc;
background-color: #999;
}
/* Button isn't necessary, but it's a fun color */
button {
cursor: pointer;
color: white;
background-color: rgba(26, 115, 232, 0.5); /* Transparent blue. */
border-radius: 15px;
font-size: 12px;
font-weight: 500;
font-stretch: condensed;
}
</style>
<div class="loading-container"><div class="loading-bar" id="loading-bar"></div></div>
<span id="txt-loaded">0/50</span> loaded
<br>
<button type="button" onclick="RandomizeLoadingBar();">Change</button>
<script>
/**
* Set loading bar to a random amount & show in label.
] */
function RandomizeLoadingBar() {
var maxValue = 50;
var value = Math.floor(Math.random() * maxValue) + 1;
SetLoadingBar('loading-bar', value, maxValue);
var txtLoad = document.getElementById('txt-loaded');
txtLoad.innerHTML = value.toString() + '/' + maxValue.toString();
}
/**
* Updates a loading bar by settings its width to a percentage.
* @param {string} loadingBarId The ID of the bar which needs to change width.
* @param {float} nominator The amount to divide.
* @param {float} denominator The amount to divide by.
*/
function SetLoadingBar(loadingBarId, nominator, denominator) {
var loadingBar = document.getElementById(loadingBarId);
var percent = 0;
if (nominator != 0 && denominator != 0) {
percent = Math.floor((nominator / denominator) * 100);
}
if (percent > 100) {
console.log('WARNING: percent is over 100');
percent = 100;
}
loadingBar.style.width = percent.toString() + '%';
}
</script>
Progress Bar: Solution 2: Process Tag
<style>
progress[value] {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background: forestgreen;
}
/* If you want different colors, put one of your bars inside a container
<div class="storage"> */
.storage > progress[value]::-webkit-progress-value {
background: blue;
}
</style>
`process` tag bar: <progress value="25" max="100" id="process-bar"/>
<script>
var processBar = document.getElementById('process-bar');
processBar.value = 65;
</script>
