Loadingデモページ

head

                               
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
                               
                           

jQuery

                               
// 背景画像を含むすべての画像が正確に読み込みこめたら実行
$('.wrapper').imagesLoaded( { background: true }, function() {
        Loadingfade();
});

// 5秒経ったら、強制的にローディング非表示
$(function(){
  setTimeout(Loadingfade, 5000);
});

//ローディング非表示処理
function Loadingfade(){
  // 1秒かけてローディング部分を非表示にし、その後0.8秒かけて背景を非表示
  $('#loading-main').fadeOut(1000, function(){
    $('#loading').fadeOut(800);
  });
}
                               
                           

CSS

                               
//ローディング部分の回転エフェクト定義
@-moz-keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-webkit-keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

//ローディング画面の背景部分
#loading {
  width: 100vw;
  height: 100vh;
  background-color: #f6f7f8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100; }

//ローディング回転部分
#loading-main:after, #loading-main:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  margin-left: -50%;
  position: absolute;
  top: 40%;
  left: 50%;
  border-radius: 110%; }

#loading-main {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 45%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 105; }
  #loading-main:after {
    -moz-animation: loading 0.75s linear infinite;
    -webkit-animation: loading 0.75s linear infinite;
    animation: loading 0.75s linear infinite;
    border: 1px solid transparent;
    border-top-color: #666; }
  #loading-main:before {
    border: 1px solid rgba(51, 51, 51, 0.15); }
                               
                           

HTML

                           
<div id="loading">
    <div id="loading-main"></div>
</div>