5W site logo 5W - мой домашний сайт-блог с картинками, кино и плюшками.

js-progressbar-load-page.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Choose site to load ...</title>
<link rel="shortcut icon" href="images/icon.png" type="image/x-icon">

<style>

body.noscroll{
min-height:100%;
overflow:hidden
}

#page_loading{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
z-index: 9999
}

.loader{
position: absolute;
top: 50%;
left: 50%;
height: 4px;
width: 380px;
margin: -2px 0 0 -190px
}

.loader>div{
animation-duration: 3s;
animation-name: loader_width;
background-image: linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);
background-size: 380px 4px;
height: 100%;
position: relative
}

.loader>div>div{
height: 64px;
position: absolute;
top: 100%;
transform: skew(45deg);
transform-origin: 0 0;
width: 100%
}

@keyframes loader_width {
0%,100%{transition-timing-function:cubic-bezier(1,0,0.65,0.85)} 0%{width:0} 100%{width:100%}
}

@-webkit-keyframes loader_width {
0%,100%{transition-timing-function:cubic-bezier(1,0,0.65,0.85)} 0%{width:0} 100%{width:100%}
}

#page_loading.light{
background-color: #f5f7f9;
color: #555
}

#page_loading.light a{
color: #666;
border-color: #555
}

#page_loading.light a: before{
background-color: #666
}

#page_loading.light .loader{
background-color: #e5e9eb
}

#page_loading.light .loader>div>div{
background-image: linear-gradient(to bottom,#eaecee,transparent)
}

#page_loading.dark{
background-color: #272727;
color: #e5e5e5
}

#page_loading.dark a{
color: #fff;
border-color: #ccc
}

#page_loading.dark a: before{
background-color: #ddd
}

#page_loading.dark .loader{
background-color: transparent
}

#page_loading.dark .loader>div>div{
background-image: linear-gradient(to bottom,#292929,transparent)
}

#page_loading .nojs{
position: absolute;
width: 300px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: 50px;
text-align: center;
font: 400 18px 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif
}

#page_loading .nojs strong,#page_loading .nojs b{
font-weight: 800
}

#page_loading .nojs a{
font-size: 80%;
text-decoration: none;
border-style: dotted;
border-width: 0 0 1px;
position: relative
}

#page_loading .nojs a: before{
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: -1px;
left: 0;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .3s ease-in-out 0;
transition: all .3s ease-in-out 0
}

#page_loading .nojs a: hover: before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1)
}

@media all and (max-width: 414px) {
.loader{width:320px; height:4px; margin:-2px 0 0 -160px}
.loader>div{background-size: 320px 4px}
}
@media all and (max-width: 320px) {
.loader{width:250px; height:4px; margin:-2px 0 0 -125px}
.loader>div{background-size: 250px 4px}
}
</style>

</head>
<body link="#ffffff" vlink="#bbbbbb" alink="#FFFF00">

<div id="page_loading" class="light">
<div class="loader"><div><div></div></div></div>
<noscript>
<div class="nojs">Please enable <strong>JavaScript</strong> and reload this page
<p><a href="http://goo.gl/d5o4zF" target="_blank" rel="nofollow">How enable Javascript</a></p>
</div>
</noscript>
</div>



<h2>Thats all, folks! </h2>


<script type="text/javascript" >
// Hide loading overlay <div /> (with spinner) after page complete loading. After hiding,
// <div /> will be removed, and for <body> removed css class 'noscroll'
var _loading_spinner=setInterval(function(){if(document.readyState=='complete'){
var $page_loading = document.getElementById('page_loading'),
$body = document.body || document.getElementsByTagName('body')[0],
speed = 50, delay = 3000;
if((typeof $page_loading != 'undefined') && ($page_loading != null)){
setTimeout(function(){
var transition = 'opacity ' + speed.toString() + 'ms ease',
removeCssClass = function(obj, className){
obj.className = obj.className.replace(className, '').replace(' ', ' ');
};
['-webkit-transition','-moz-transition','transition'].forEach(function(prefix){
$page_loading.style[prefix] = transition;
});
$page_loading.style['opacity'] = '0';
$page_loading.style['filter'] = 'alpha(opacity=0)';
removeCssClass($body, 'noscroll');
setTimeout(function(){
$page_loading.parentNode.removeChild($page_loading);
}, speed + 1);
}, delay);
}
clearInterval(_loading_spinner);
}},10);
</script>



</body>
</html>
Наверх