"inverse progress bar"
Bootstrap 3.3.0 Snippet by nardinjo

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div id="demo"><span style="left:90%">90%</span></div>
<div class="progress loading">
<div class="progress-bar progress-bar-perqind" role="progressbar" style="width:10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span style="left:50%">50%</span>
<div class="progress">
<div class="progress-bar progress-bar-perqind" role="progressbar" style="width:50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span style="left:10%">10%</span>
<div class="progress">
<div class="progress-bar progress-bar-perqind" role="progressbar" style="width:90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span style="left:2%">{ curent width = 100 - real width }</span>
<div class="progress">
<div class="progress-bar progress-bar-perqind" role="progressbar" style="width:0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.container {
background-color: #1b1b1b;
color:#666;
}
span{
position:relative;
width:10px;
margin-left:-10px;
}
.progress {
background: rgba(42,252,5,1);
background: -moz-linear-gradient(left, rgba(42,252,5,1) 0%, rgba(227,252,5,1) 50%, rgba(252,40,8,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(42,252,5,1)), color-stop(50%, rgba(227,252,5,1)), color-stop(100%, rgba(252,40,8,1)));
background: -webkit-linear-gradient(left, rgba(42,252,5,1) 0%, rgba(227,252,5,1) 50%, rgba(252,40,8,1) 100%);
background: -o-linear-gradient(left, rgba(42,252,5,1) 0%, rgba(227,252,5,1) 50%, rgba(252,40,8,1) 100%);
background: -ms-linear-gradient(left, rgba(42,252,5,1) 0%, rgba(227,252,5,1) 50%, rgba(252,40,8,1) 100%);
background: linear-gradient(to right, rgba(42,252,5,1) 0%, rgba(227,252,5,1) 50%, rgba(252,40,8,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2afc05', endColorstr='#fc2808', GradientType=1 );}
.progress-bar-perqind {
background-color: #333;
float:right;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var intro_progres=setInterval(function(){loading_time()},1);
var count = 0;
var inverse = 0;
function loading_time() {
if(count < 100){
count += 0.02;
inverse = 100-count;
$('.loading').html('<div class="progress-bar progress-bar-perqind" role="progressbar" style="width:'+inverse+'%;" aria-valuenow="'+inverse+'" aria-valuemin="0" aria-valuemax="100">');
$('#demo').html('<span style="left:'+Math.round(count)+'%">'+Math.round(count)+'%</span>');
}
else if(count > 99){
count = 0;
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit
circle progress bar
Progress bars Responsive
Progress Bar Meter!

Questions / Comments: