ページ切り替えのぐるぐるjquery　ローディングの入れ方

ページ切り替えのぐるぐるを入れたい

ページ切り替えのぐるぐるとか、サイトのロゴがでたり、アイコンがでたり、
ワードプレスのテーマによってはもともと付いていたり、変更できたりしますが、
そうじゃない！こうしたい！といってもできないときありますよね。

意外とめちゃくちゃ簡単に入れられるのでご紹介。
参考にしたサイトと、ぐるぐるさせたい装飾の参考は以下

ローディング参考

https://myscreate.com/loading-view/

cssコピペできるサイト

https://tobiasahlin.com/spinkit/
https://epic-spinners.epicmax.co/#/
https://projects.lukehaas.me/css-loaders/

※デベロッパーで抜けるサイト
http://www.css-spinners.com/

sng

https://codepen.io/slyka85/pen/QvBQPb/

やることは3つ

headerに入れる

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

bodyの直前に入れる

bodyを閉じる直前です！footerじゃないよ！

<section id="loading" class="loading">
　<div class="loading__img">
　　<img src="https://goo.gl/8XdHq9">
　</div>
</section>
<script>
$(function(){
　//ローディングエリアを取得
　var loading = $("#loading");
　//ローディングエリアを隠す処理
　var isHidden = function(){
　　loading.fadeOut(1000); //1000ミリ秒かけてフェードアウト
　};
　//1000ミリ秒後にloadingFunc開始
　setTimeout(isHidden,1000);
});
</script>

cssの例

あとは、適当に入れたい装飾を入れ替える！
例だけど以下をcssにコピペ

/*例：*/
.loading {
 position: fixed;
 z-index: 100;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: #fff;
}
.loading .spinner {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
} 
.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;
  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

ベースのcss

ベースは以下。
これさえ入れていれば、ちょうどいいところに表示される。
あとは、コピペサイトとか参考サイトから持ってきた装飾を追加してあげればOK！

/*★basecss*/

.loading {
 position: fixed;
 z-index: 100;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: #fff;
}
.loading /*【追加class】*/ {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}