<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>
<div class="container">
<div class="row">
<h2>Animated Bootstrap Progress Bars by <a href="http://gridgum.com/author/agez" target="_blank">agez</a></h2>
<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>