Multiple Progress bars05/08/2015

1.- What we have here is a modified version of IVAN LAZAREVIC, you can access the original source here. I just take the first part (html structure and css for the div) and modified the JS part.

2.- Now let's get started, first of all the HTML, I just made a table to add multiple progress bars...

<table  class="prod-status" onload="progress()">
  <thead>
    <tr>
    <th>Progress<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div id="progress"><div></div></div>
      </td>
    </tr>
    <tr>
      <td><div id="progress"><div></div></div>
      </td>
    </tr>
    <tr>
      <td><div id="progress"><div></div></div>
      </td>
    </tr>
    <tr>
      <td><div id="progress"><div></div></div>
      </td>
    </tr>
    <tr>
      <td><div id="progress"><div></div></div>
      </td>
    </tr>
    <tr>
      <td><div id="progress"><div></div></div>
      </td>
    </tr>
    <tr>
      <td><div id="progress"><div></div></div>
      </td>
    </tr>
 </tbody>
</table>

3.- Now the css, I made 4 styles to change the progress bar color accoding to its value:

0 to 25. Red color
26 to 50. Organge color
51 to 75. Green color
75 to 100. Blue color

/* progress bar */
.progress{
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, 
    transparent 25%, 
    transparent 50%, rgba(255, 255, 255, 0.15) 50%, 
    rgba(255, 255, 255, 0.15) 75%, 
    transparent 75%, 
    transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, 
    transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, 
    rgba(255, 255, 255, 0.15) 75%, 
    transparent 75%, 
    transparent);
    background-color: CornflowerBlue;
    box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3);
    /*background-image: url(pbar-ani-m.gif)*/
}
.progress-min{
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, 
    transparent 25%, transparent 50%, 
    rgba(255, 255, 255, 0.15) 50%, 
    rgba(255, 255, 255, 0.15) 75%, 
    transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, 
    transparent 25%, 
    transparent 50%, rgba(255, 255, 255, 0.15) 50%, 
    rgba(255, 255, 255, 0.15) 75%, 
    transparent 75%, transparent);
    background-color: #d43535;
    box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3);
    /*background-image: url(pbar-ani-orange.gif)*/
}

.progress-mid{
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, 
    transparent 25%, transparent 50%, 
    rgba(255, 255, 255, 0.15) 50%, 
    rgba(255, 255, 255, 0.15) 75%, transparent 75%, 
    transparent);
    background-image: linear-gradient(-45deg, 
    rgba(255, 255, 255, 0.15) 25%, 
    transparent 25%, transparent 50%, 
    rgba(255, 255, 255, 0.15) 50%, 
    rgba(255, 255, 255, 0.15) 75%, 
    transparent 75%, transparent);
    background-color: #ea8209;
    box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3);
    /*background-image: url(pbar-ani.gif)*/
}
.progress-average{
    -webkit-animation: progress 1s linear infinite;
    -moz-animation: progress 1s linear infinite;
    animation: progress 1s linear infinite;
    background-repeat: repeat-x;
    background-size: 30px 30px;
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, 0.15) 50%, 
    rgba(255, 255, 255, 0.15) 75%, 
    transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, 
    transparent 25%, transparent 50%, 
    rgba(255, 255, 255, 0.15) 50%, 
    rgba(255, 255, 255, 0.15) 75%, 
    transparent 75%, 
    transparent);
    background-color: #00cb08;
    box-shadow:inset 0px 0px 6px 2px rgba(255,255,255,.3);
    /*background-image: url(pbar-ani-green.gif)*/
}

4.- Adding some animation...

@-webkit-keyframes progress
{
to {background-position: 30px 0;}
}
@-moz-keyframes progress
{
to {background-position: 30px 0;}
}

@keyframes progress
{
to {background-position: 30px 0;}
}

5.- Lets work on the JS part.

Lets made an array with the values.
We need a cicle to get all the div's with the id 'progress' and a div child
Optionally, We can add a class to the div, so we can change the value later.
Finally we made the call of the progress function sending the value and a parent div

function progress()
{
    var values = [25, 50, 75, 90, 68, 45, 22];
    var i = 0;
    $('#progress:first-child').each(function() { 
		$(this).find('div').addClass ="v"+i;
        progressBar(values[i], $(this));
        i++;
    });
}

5.- The progress JS, I modified the original JS to add some criteria so we can add the desire color for the value of our progress bar according to the step # 3

function progressBar(percent, element) {
    var progress =  element.find('div');
    if (percent <= 25)
        progress.addClass('progress-min');
    else if (percent <= 50 & percent > 25)
        progress.addClass('progress-mid');
    else if (percent <= 75 & percent > 50)
        progress.addClass('progress-average');
    else if(percent > 75)
        progress.addClass('progress');
	progress.animate({ width: percent + '%' }, 500).html(percent + "% "); /* Change the % to & nbsp; w/o space*/
}

6.- The final result...

7.- With an image instead of the bg color

Welcome to my page!

Multiple Progress bars05/08/2015

On Github: