"Progress Bar bootstrap Calculate Progress Bar Calculate percentage with jquery"
Bootstrap 3.3.0 Snippet by FauziFerdiansyah

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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 + '%');
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit React
circle progress bar
Progress bars Responsive
Progress Bar Meter!

Questions / Comments: