CSSとjQueryで作るローディング

2017/07/31

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になっています。

デモページ