"Progress Bar With glow "
Bootstrap 4.1.1 Snippet by GSTSTUDIO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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">
<div class="preloader-wrap">
<div class="percentage" id="precent"></div>
<div class="loader">
<div class="trackbar">
<div class="loadbar"></div>
</div>
<div class="glow"></div>
</div>
</div>
<div class="wrap">
</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
37
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
html, body {
height: 100%;
margin: 0;
}
body {
font-family: 'Lato', sans-serif;
background-color: #222;
}
.preloader-wrap {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
background: rgba(0,0,0,1);
z-index : 2;
}
.percentage {
z-index: 100;
border: 1px solid #ccc;
text-align:center;
color: #fff;
line-height: 30px;
font-size : 15px;
}
.loader,
.percentage{
height: 30px;
max-width: 500px;
border: 2px solid ##ff6a00;
border-radius: 20px;
font-weight: 300;
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
37
var width = 100,
perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page.
EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
time = parseInt((EstimatedTime/1000)%60)*100;
// Loadbar Animation
$(".loadbar").animate({
width: width + "%"
}, time);
// Loadbar Glow Animation
$(".glow").animate({
width: width + "%"
}, time);
// Percentage Increment Animation
var PercentageID = $("#precent"),
start = 0,
end = 100,
durataion = time;
animateValue(PercentageID, start, end, durataion);
function animateValue(id, start, end, duration) {
var range = end - start,
current = start,
increment = end > start? 1 : -1,
stepTime = Math.abs(Math.floor(duration / range)),
obj = $(id);
var timer = setInterval(function() {
current += increment;
$(obj).text(current + "%");
//obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: