A Pen by Reza Khan Mohammadi.

index.html

<div id="progress1" class="progress-bar">
	<span class="bar">
    <span class="value" style="width:0%;" >0%</span>
  </span>
  <span class="progress1" style="width:0%">0%</span>
</div>

<div id="progress2" class="progress-bar">
	<span class="bar">
    <span class="value" style="width:0%">0%</span>
  </span>
  <span class="progress2" style="width:0%">0%</span>
</div>
<div id="progress3" class="progress-bar">
	<span class="bar">
    <span class="value" style="width:0%">0%</span>
  </span>
  <span class="progress3" style="width:0%">0%</span>
</div>
<div>
  <select id="progressGroup">
  <option value="#progress1">#progress1</option>
  <option value="#progress2">#progress2</option>
  <option value="#progress3">#progress3</option>
</select>
</div>
<p>
  <button role="decrement" type="button">-25</button>
  <button role="decrement" type="button">-10</button>
  <button role="increment" type="button">+10</button>
  <button role="increment" type="button">+25</button>
</p>

Progress-Bar-Reza-Optus.markdown

Progress Bar Reza Optus

Just a simple, animated progress bar.

Forked from Erik Phipps's Pen Simple progress bar with transition.

A Pen by Reza Khan Mohammadi on CodePen.

License.

script.js

$( document ).ready(function() {
  //
$('button').on('click.control', function(event){
 var $selectedProgress = $("#progressGroup option:selected").text();
 var $progress = $($selectedProgress);
 var currentProgress = $($selectedProgress.replace('#','.')).text();
  var  percentage = parseInt(currentProgress.replace(/\%/g, ""));
  var $this = $(this);
  var  $target = $(event.target);
  var  increment =  $target.text().substring(1, $target.text().length);  
  console.log(percentage);
  if($target.attr('role') === "increment"  ){
    percentage = percentage + parseInt(increment);
  }
  
  if($target.attr('role') === "decrement"  ){
    percentage = percentage - parseInt(increment);
  }
  if( percentage > 100){
     $progress.find('.value').css("background-color", "red");
     $progress.find('.value').css('width', '100%');
   
  }else{
     $progress.find('.value').css('width', percentage  + '%').text(percentage + '%');
    $progress.find('.value').css("background-color", "lightblue");
    console.log($selectedProgress);
  }

  $($selectedProgress.replace('#','.')).text((percentage < 0) ? " 0%" : percentage  + '%');
 
});
$("#progressGroup").change(function() {
        $selectedProgress = $("#progressGroup option:selected").text();
 });
  //
 });

Simple-progress-bar-with-transition.markdown

Simple progress bar with transition

Just a simple, animated progress bar.

Forked from Erik Phipps's Pen Simple progress bar with transition.

A Pen by Reza Khan Mohammadi on CodePen.

License.

style.scss

@import "compass/css3";
body{
  margin:1em;
}

.progress-bar {
  background-color: #ffffff;
  @include background-image(linear-gradient(top, #ffffff 0%,#fcfcfc 5%,#ccc 100%));
  @include border-radius(5px);
  @include box-shadow(0px 0px 5px rgba(0,0,0,.5));
  border: 1px solid #aaa;
  padding: 5px; z-index:1;
  font-size: 1.75em;
  width:300px;
  .bar {
    display: block;
    background-color: #f7f7f7;
    z-index:100;
    @include box-shadow(inset 1px 0px 3px  rgba(0,0,0,0.8));
  }
  .value {
    text-indent:-999em;
    display: block;
    position: relative;
   
    color:black;
  	background-color: lightblue;
      @include box-shadow(inset 1px 0px 3px  rgba(0,0,0,0.8));
		@include transition-property(width);
  	@include transition-duration(.5s);

    &:before{
      display: block;
      position: absolute;
      content:" ";
      width: 100%;
     
      height: 1.5em;
      top: 0;
      left: 0;
    }
    .no-cssgradients & {
    	background:#25426b url(some/image/bg-progress.png) repeat top left;
    }
  }
}