CSS and JavaScript - Progress Bar

From NoskeWiki
Revision as of 22:28, 30 November 2019 by NoskeWiki (talk | contribs) (Created page with "==About== {{DaughterPage|mother=CSS}} 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 (...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

About

NOTE: This page is a daughter page of: CSS


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;
  }
</style>

`process` tag bar: <progress value="25" max="100" id="process-bar"/>

<script>
  var processBar = document.getElementById('process-bar');
  processBar.value = 65;
</script>


Links