"Animated Progress Bar"
Bootstrap 3.2.0 Snippet by Zinatra

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
27
28
29
30
31
32
33
34
35
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 class="row">
<h2>Animated Bootstrap Progress Bars by <a href="http://gridgum.com/author/agez" target="_blank">agez</a></h2>
<!-- Skill Bars -->
<div class="progress skill-bar ">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<span class="skill">HTML <i class="val">100%</i></span>
</div>
</div>
<div class="progress skill-bar">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" >
<span class="skill">CSS<i class="val">90%</i></span>
</div>
</div>
<div class="progress skill-bar">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<span class="skill">JavaScript<i class="val">75%</i></span>
</div>
</div>
<div class="progress skill-bar">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
<span class="skill">Photoshop<i class="val">55%</i></span>
</div>
</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
.progress {
height: 35px;
}
.progress .skill {
font: normal 12px "Open Sans Web";
line-height: 35px;
padding: 0;
margin: 0 0 0 20px;
text-transform: uppercase;
}
.progress .skill .val {
float: right;
font-style: normal;
margin: 0 20px 0 0;
}
.progress-bar {
text-align: left;
transition-duration: 3s;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
$(document).ready(function() {
$('.progress .progress-bar').css("width",
function() {
return $(this).attr("aria-valuenow") + "%";
}
)
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

How does one change the individual colors of each bar? Did I miss something simple or?

Nicholas Lauer () - 7 years ago - Reply 0


just open ur bootstrap.css and find this class .progress-bar-info .. there u can change bar color.

blackspi130382 () - 7 years ago - Reply -1


how to increase duration

Yasir Zia () - 7 years ago - Reply 0


Look in the CSS file, line 20 and increase transition-duration

Tommi () - 7 years ago - Reply 0