<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>

.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; }

$(document).ready(function() { $('.progress .progress-bar').css("width", function() { return $(this).attr("aria-valuenow") + "%"; } ) });