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

デモページ

Related article