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

From NoskeWiki
Jump to navigation Jump to search
Line 103: Line 103:
 
     border-radius: 2px;
 
     border-radius: 2px;
 
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
 
     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>
 
</style>

Revision as of 23:46, 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;
  }
  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>


Links