24'C 구름 많음
서울 강남구
페이지 상단에 삽입
<!-- PRELOADER -->
<div class="page-loader">
<div class="loader">Loading...</div>
</div>
<!-- END PRELOADER -->
페이지하단에 스크립트로 삽입
! function(e) {
e(window).load(function() {
e(".page-loader").delay(350).fadeOut("slow")
});
}(jQuery);
/*!------------------------------------------------------------------
[Preloader]
*/
.page-loader {
background: #fff;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 9998;
}
.loader {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
text-indent: -9999em;
background-color: transparent;
border: 5px solid #eee;
border-radius: 50%;
}
.loader:after {
position: absolute;
content: "";
top: 0px;
left: 0px;
width: 40px;
height: 40px;
padding: 2px;
border-width: 2px;
border-style: solid;
border-color: #27CBC0 transparent transparent transparent;
border-radius: 50%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
animation: ringrotate 0.8s infinite cubic-bezier(0.5, 0.49, 0.49, 0.49);
-webkit-animation: ringrotate 0.8s infinite cubic-bezier(0.5, 0.49, 0.49, 0.49);
}
@keyframes ringrotate {
0% {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
@-webkit-keyframes ringrotate {
0% {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}