<html>
<head>
<title>Pure CSS Fancy Page Loader</title>
<style type="text/css">
#loader-wrapper {
height: 1000px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
#loader {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
animation: 2s linear 0s normal none infinite running spin;
border-color: #3cc transparent transparent;
border-image: none;
border-radius: 50%;
border-style: solid;
border-width: 3px;
display: block;
height: 150px;
left: 50%;
margin: -75px 0 0 -75px;
position: relative;
top: 50%;
width: 150px;
z-index: 1001;
}
#loader::before {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
animation: 3s linear 0s normal none infinite running spin;
border-color: #3d4a5d transparent transparent;
border-image: none;
border-radius: 50%;
border-style: solid;
border-width: 3px;
bottom: 5px;
content: "";
left: 5px;
position: absolute;
right: 5px;
top: 5px;
}
#loader::after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
animation: 1.5s linear 0s normal none infinite running spin;
border-color: #ccc transparent transparent;
border-image: none;
border-radius: 50%;
border-style: solid;
border-width: 3px;
bottom: 15px;
content: "";
left: 15px;
position: absolute;
right: 15px;
top: 15px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#loader-wrapper .loader-section {
background: #fff none repeat scroll 0 0;
height: 1000px;
position: fixed;
top: 0;
transform: translateX(0px);
width: 51%;
z-index: 1000;
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
transform: translateX(-100%);
transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
}
.loaded #loader-wrapper .loader-section.section-right {
transform: translateX(100%);
transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
}
.loaded #loader {
opacity: 0;
transition: all 0.3s ease-out 0s;
}
.loaded #loader-wrapper {
transform: translateY(-100%);
transition: all 0.3s ease-out 1s;
visibility: hidden;
}
</style>
</head>
<body>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.