CSSとjQueryで作るローディング
遊んでたら出来上がったもの。
firefoxでいい動きをしなかったので、userAgentで振り分けました。firefoxだとloadが完了するとloading画面がふわっとフェードし、それ以外のブラウザだと、波が引くようにloading画面が下に下がります。
動きの部分は全てcssアニメーション。firefoxブラウザ限定のフェードのみjsで制御しています。
HTML
<div class="loading">
<div class="loadingWrap">
<div class="loadingImg"> <span class="loadingImgWrap loadingImgWrap1"> <span class="loadingImgWrap loadingImgWrap2"><img src="img/demo/loading2.png" alt=""></span> <img src="img/demo/loading1.png" alt=""> </span> </div>
</div>
</div>
<div class="wrap">
<div class="contents one">1</div>
<div class="contents two">2</div>
<div class="contents three">3</div>
</div>CSS
/*-------------------------------------------*/
/*loading
/*-------------------------------------------*/
.loading {
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
left: 0px;
padding-top: 140px;
overflow: hidden;
z-index: 100000;
}
.loadingWrap {
background: #15559d;
width: 100%;
height: 100%;
overflow: hidden;
}
.loadingOk {
height: 0 !important;
bottom: -140px;
animation: loadingOk 0.5s ease-in 0s 1 alternate;
}
@keyframes loadingOk {
0% {
height: 100%;
bottom: 0;
}
100% {
height: 0 !important;
bottom: -140px;
}
}
.loading:before {
position: absolute;
top: 0;
width: 100%;
height: 141px;
content: '';
display: inline-block;
background: url(img/demo/170731_3.png) repeat-x bottom center;
background-size: contain;
vertical-align: bottom;
}
.loadingImg {
position: absolute;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loadingImg .loadingImgWrap {
display: block;
text-align: center;
}
.loadingImg .loadingImgWrap1 {
position: relative;
width: 150px;
height: 150px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.loadingImg .loadingImgWrap1>img {
animation: nowLoading linear 2s -1s infinite normal;
}
@keyframes nowLoading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.loadingImg .loadingImgWrap2 {
position: absolute;
width: 60px;
height: 36px;
left: 0;
right: 0;
top: 58px;
margin: 0 auto;
}
/*-------------------------------------------*/
/*other
/*-------------------------------------------*/
body {
margin: 0;
padding: 0;
}
.contents {
width: 100%;
height: 500px;
line-height: 500px;
text-align: center;
vertical-align: middle;
color: #fff;
font-size: 50px;
font-weight: bold;
}
.one {
background: #b2e0f0;
}
.two {
background: #67bedc;
}
.three {
background: #2a9cc3;
}js(jQuery)
jQuery(function() {
var wrap = jQuery('.wrap');
var loadingImg = jQuery('.loadimgImg');
var loading = jQuery('.loading');
var userAgent = window.navigator.userAgent.toLowerCase();
jQuery(function() {
var h = jQuery(window).height(); //ウィンドウの高さ
wrap.css('display', 'none');
loading.height(h).css('display', 'block');
loadingImg.height(h).css('display', 'block');
loading.removeClass('loadingOk'); //loadingOkというclassを消しておく
});
jQuery(window).load(function() { //windowがloadされたら処理開始
if (userAgent.indexOf('firefox') != -1) { //もしfirefoxブラウザのとき
loading.delay(900).fadeOut(800);
loadingImg.delay(600).fadeOut(300); //firefoxのみふわっとなる
wrap.css('display', 'block');
} else {
setTimeout(function() { //それ以外のブラウザのとき1000ミリ秒後に処理開始
loading.addClass('loadingOk'); //loadingOkというclassを付ける
}, 1000);
wrap.css('display', 'block');
}
});
});wordpressで作っていたので、$がjqueryになっています。
