<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>
@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;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin : auto;
}
.loader:after,
.percentage:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.trackbar {
width: 100%;
height: 100%;
border-radius: 20px;
color: #fff;
text-align: center;
line-height: 30px;
overflow: hidden;
position: relative;
opacity: 0.99;
}
.loadbar {
width: 0%;
height: 100%;
background: repeating-linear-gradient(
45deg,
#008737,
#008737 10px,
#69AF23 10px,
#69AF23 20px
); /* Stripes Background Gradient */
box-shadow: 0px 0px 14px 1px #008737;
position: absolute;
top: 0;
left: 0;
animation: flicker 5s infinite;
overflow: hidden;
}
.glow {
width: 0%;
height: 0%;
border-radius: 20px;
box-shadow: 0px 0px 60px 10px #008737;
position: absolute;
bottom: -5px;
animation: animation 5s infinite;
}
@keyframes animation {
10% {
opacity: 0.9;
}
30% {
opacity: 0.86;
}
60% {
opacity: 0.8;
}
80% {
opacity: 0.75;
}
}
.wrap {
background-image : url(http://4.bp.blogspot.com/-YkAi3Ags92E/TqKbU34wWDI/AAAAAAAA9iw/DSunXRq1ZoY/s1600/funny%2Bmonkey%2Bpictures%2B%252829%2529.jpg);
background-position: left top;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
position: relative;
z-index : 1;
}
.copyrights {
position: fixed;
right: 20px;
bottom: 20px;
font-size: 14px;
color: #fff;
display: block;
}
.copyrights a { color: orange; text-decoration: none; }
.copyrights a:hover { color : #fff; text-decoration: underline; }
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);
}
}, stepTime);
}
// Fading Out Loadbar on Finised
setTimeout(function(){
$('.preloader-wrap').fadeOut(300);
}, time);
