【１】 Jsプラグインの『PACE』を利用
『PACE』
https://github.hubspot.com/pace/docs/welcome/
上記URLにアクセスして下にスクロールしていくと、いくつかのローディングアニメーションが確認できます。
まずはここでイメージに近いものを選びましょう。
ちなみにデフォルトの色は水色ですが、変えたい場合は
「CHOOSE A COLOR」
ボタンをクリックすると変更できるので試してみてください。
【２】 CDNでhtmlにプラグインのjsを読み込ませる
『cdnjs』
https://cdnjs.com/libraries/pace
上記URLにアクセスすると、『PACE』を使うためのCDNが表示されます。
今回「Version」は特に気にせず最新の1.0.2を選びました。
すると一覧の一番上に「〜/pace.min.js」というタグが背景色付きで表示されていると思うので、
その右にある「>（Copy Script Tag）」ボタンでコピーして</body>タグ前に貼り付けます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js" integrity="sha512-ePSfiGQMIzYzXVQLqWoVC3yxVEHIM5Y3EGh9jPNxpf+hPuLtzPdxJX+lTC3ziPMlDgc5OsM4JThxGwN2DkWEeA==" crossorigin="anonymous"></script>
ちなみに属性にある「integrity」や「crossorigin」はなくても変わらず動きますが、
それぞれ、サードパーティによる改変が行われていないことを証明するものなので
ちょっと長いけどそのままコピペしておきましょう。
【３】 CSSをコピペ！
ここまででローディングアニメーションの下準備はできたので、
次は見た目の部分です。
デフォルトで用意されているカラーで、特にカスタマイズしない場合
下記の色でしたら【２】でコピペしたコードの下にたくさんあった「〜/色/pace-theme-テーマ名.min.css」というコードのどれかを選んで<head>タグの中にコピペするだけでできちゃいます！
数えてみたら10色ありましたね。
-black
-blue
-green
-orange
-pink
-purple
-red
-silver
-white
-yellow
例えば「Barber Shop」というテーマを「black」カラーで使いたい場合は下記のようなコードになります。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-barber-shop.min.css" integrity="sha512-ITJRv1dtcxW1daw2DC57YZo3xZjeCj38SQYnVLEiFnO2oL8MxIrGuV9f1xIA+d1awA6WCbuUZsVAh9Faxa7U3Q==" crossorigin="anonymous" />
ちょっと見つけづらいと思いますが、テーマ名は小文字かつスペースをハイフンでつないでコードに入っているので、
「Barber Shop」を見つけたい場合はブラウザの文字検索機能で「barber-shop」と検索すればすぐ見つかると思います。
カラー名もテーマ名のすぐ前に入っているので、わかりやすいと思います。
上記以外のカラーを使いたい場合
【１】で色を変えてみたと思いますが、
テーマ名の下にあった
「COPY TO CLIPBOARD」
ボタンをクリックすると、そのカラーを使った場合のCSSがコピーできます。
それをCSSシートにコピペしてください。
※<head>タグ内に<style>タグで…と言うと量が多いので外部CSSに書いた方が良いと思います。
CSSをカスタマイズしたい場合
色だけでなく形を変えたり、自分で用意したgifアニメーション画像を使いたい場合なども
「COPY TO CLIPBOARD」ボタンからCSSをコピペしてからいじるといいと思います。
私の場合は、「◯%」という読み込み度の表示が欲しかったので、
「Big Counter」というテーマを使って、最終的に下図のように仕上げました。
ローディングアニメーションが終わったらフワッとページを表示させたい
おそらく簡単に組み込んだだけだと、ローディングアニメーション中も後ろでページが崩れつつ表示されていくさまが丸見えになっているかもしれません。
私がそうでした。
もっときれいに表示させたいですよねー…
ネット検索したらいくつかやり方があったんですが、結局どれもうまくいかなかったので、
CSSのanimationプロパティを使ってふんわり表示を実現させました。
１. paceクラスの要素以外opacity: 0;に
<body>タグ内の子要素の先頭に下記コードが入っていると思いますが、
これ以外の子要素をopacity: 0;にして見えなくします。
※paceクラス以外をdivで囲ってしまった方がラクでしょう。
<div class="pace pace-inactive">...</div>
ローディングアニメーション表示中と終了後ではクラスが変わります。
body
表示中：「pace-running」
終了後：「pace-done」
paceクラス
表示中：「pace-active」
終了後：「pace-inactive」
これを利用してCSSを書いていきます。
/*ローディングアニメーション表示中 ー 非表示*/
.pace-running #contents_wrapper {
opacity: 0;
}
/*ローディングアニメーション表示中 ー 1秒かけてフワッと表示*/
.pace-done contents_wrapper {
animation-name: show;
animation-duration: 1s;
}
@keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
おわり
多分これで出来るはず！
…というサイトを参考にしてできないことなんてざらにあるので、
もしできなかったら頑張っていろんなページ参考にして頑張ってください…