ローディングアニメーション

情報量が多いサイトだと読み込むまでに時間がかかり、レイアウトが崩れたかのように見えてしまう場合があります。
そんな時、読み込みの時間がかかるサイトやスライダーなどにローディングアニメーションを実装することがあります。

ローディングアニメーションの実装方法です。

仕組みとしては、すべての読み込みが完了するまでに、コンテンツ部分は非表示にして、ローディング画面を表示させている状態になっています。

window.onload = function(){  
    $(function() {
        $("#loading").fadeOut();
    });
}
     
$(function() {   
    var h = $(window).height();
    $('#wrapper').css('display','none');
    $('#loader-bg ,#loader').height(h).css('display','block');
});
      
$(window).load(function () {  
    $('#loader-bg').delay(900).fadeOut(800);
    $('#loader').delay(600).fadeOut(300);
    $('#contents').css('display', 'block');
});
 
$(function(){  
    setTimeout('stopload()',10000);
});

#loading{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
  }
      
#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 1;
 }

ローディング用のgifですが、cssでも用意することができます。

CSSで作成すれば、JavaScriptよりも簡単にアニメーションを作ることができる上、ブラウザの処理にも負担をかけないでしょう。

実装には、CSS3のanimation プロパティを使用します。
Loaders.css

id=”loading”に対して、上記のサイトのcssを適用するだけで、いろいろなアニメーションを設定することができます。