<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="col-md-6"> <h4 class="page-header text-info">Progress Bar Bootstrap</h4> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-info active" role="progressbar"> <span class="current-value">0%</span> </div> </div> <small class="text-default">© 2017 <b><a href="https://fauziferdiansyah.github.io/id/">Fauzi Ferdiansyah</a></b> | Made with <b class="text-danger">❤</b> in <b>Indonesia</b>.</small> </div>

// currentCount is a growing number; // progress is the final number; // You can change the number 300; var currentCount = 150; var progress = (currentCount / 300) * 100; console.log(progress); $(".progress-bar").width(progress + '%'); if (progress % 1 !== 0) { $(".progress-bar").text(progress.toFixed(1) + '%'); } else { $(".progress-bar").text(progress + '%'); }