"progress bar"
Bootstrap 4.1.1 Snippet by atifkhan

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
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h2>Progress Bar</h2>
<div class="row text-center">
<div class="col-sm-4">
<div class="progressbar">
<div class="second circle" data-percent="77">
<strong></strong>
<span>animation <br> progress</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="progressbar">
<div class="second circle" data-percent="55">
<strong></strong>
<span>animation <br> progress</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="progressbar">
<div class="second circle" data-percent="100">
<strong></strong>
<span>animation <br> progress</span>
</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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.circle {
width: 200px;
margin: 6px 6px 20px;
display: inline-block;
position: relative;
text-align: center;
line-height: 1.2;
}
.circle canvas {
vertical-align: top;
width: 200px !important;
}
.circle strong {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 30px;
color: black;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
$(document).ready(function ($) {
function animateElements() {
$('.progressbar').each(function () {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
// startAngle: -Math.PI / 2,
value: percent / 100,
size : 400,
thickness: 15,
fill: {
color: '#663399'
}
}).on('circle-animation-progress', function (event, progress, stepValue) {
$(this).find('strong').text((stepValue*100).toFixed(0) + "%");
}).stop();
}
});
}
animateElements();
$(window).scroll(animateElements);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: