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.
<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> |
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.
$( 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(); | |
}); | |
// | |
}); |
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.
@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; | |
} | |
} | |
} |