Difference between revisions of "CSS and JavaScript - Progress Bar"

From NoskeWiki
Jump to navigation Jump to search
(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 (...")
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
 
==About==
 
==About==
  
{{DaughterPage|mother=[[CSS]]}}
+
{{DaughterPage|mother=[[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 [https://www.w3schools.com/tags/tag_progress.asp progress] HTML element.
 
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 [https://www.w3schools.com/tags/tag_progress.asp progress] HTML element.
Line 8: Line 8:
  
 
==Progress Bar: Solution 1: Div inside a Div==
 
==Progress Bar: Solution 1: Div inside a Div==
 +
 +
[[image:Screenshot_loading_bar_div.png|thumb|center|798px|Loading bar using a div inside a container div]]
  
  
Line 85: Line 87:
  
 
==Progress Bar: Solution 2: Process Tag==
 
==Progress Bar: Solution 2: Process Tag==
 +
 +
[[image:Screenshot_process_tag_bar.png|thumb|center|648px|Progress bar using a `progress` tag and some custom CSS for color]]
  
  
Line 117: Line 121:
  
  
 +
[[Category:Images]]
 
[[Category:Computers]]
 
[[Category:Computers]]

Revision as of 21:32, 30 November 2019

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

Loading bar using a div inside a container 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

Progress bar using a `progress` tag and some custom CSS for color


<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