Vueの規模が大きくなってくると、Vueのロードが完了するまでの間、{{ xxxx }}のようなタグが目立ってくるようになります。
Vueのコンポーネントを使えばうまく回避できるのかもしれませんが、Vueインスタンスと双方向データバインディングだけで満足している私にとっては、少々悩ましいです。
そこで、VueやJavascriptに頼らず、CSSだけでVueのロード前の画面をかぶせるローディング中画面を作ろうかなあと思います。
実際のローディング画面を見たい場合は、以下のWebページを開くと、一瞬だけローディング画面が見れます。
Webページ
https://poruruba.github.io/utilities/
（参考）GitHub
https://github.com/poruruba/utilities
やってること
Flexパネルを画面全体で覆って、CSSアニメーションを表示させ、Vueのロードが完了したら、Flexパネルをフェードアウトさせる、です。
- 画面全体を覆うFlexパネルの定義
- ロード完了したらフェードアウトさせる処理
- フェードアウトを開始する処理
- ロード中のアニメーションのひな型を選ぶ
- HTMLにロード中アニメーションのエレメントを挿入する
- Javascriptにフェードアウト開始の呼び出しを追加する
画面全体を覆うFlexパネルの定義
CSSで以下のように表現します。
# loader-background {
background: #fff;
height: 100%;
width: 100%;
position: fixed;
display: flex;
top: 0px;
left: 0px;
z-index: 9999;
--sk-color: #00ced1;
}
heightとwidthを100%にしてます。
※--sk-colorは後で説明します。
ロード完了したらフェードアウトさせる処理
CSSで以下のように表現します。
.loader-loaded {
animation: fadeout-anim 1s linear forwards;
}
@keyframes fadeout-anim {
100% {
opacity: 0;
visibility: hidden;
}
}
上記にて、CSSアニメーションを使って1秒かけて透明およびhiddenにしてます。
フェードアウトを開始する処理
前のCSSで、loader-loadedのクラスがついていれば、フェードアウトのアニメーションが開始されるようにしました。
なので、Vueのロードが完了したタイミングで、Javascriptから以下を呼び出せばよいです。
function loader_loaded(){
const element = document.getElementById("loader-background");
if( element )
element.classList.add('loader-loaded');
}
ロード中のアニメーションのひな型を選ぶ
こちらのCSSが単純そうだったので採用しました。
tobiasahlin/SpinKit
デモページもありますので、どんなアニメーションか確認できます。
CDNにも登録されているのですぐに使えます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spinkit/2.0.1/spinkit.min.css" />
例えば、以下のようなHTMLを追加すればよいようです。
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
HTMLにロード中アニメーションのエレメントを挿入する
<html> の <body> の先頭あたりに以下を追加します。
上記のアニメーションを使う場合
<div id="loader-background">
<div class="sk-chase sk-center">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</div>
要するに、idが「loader-background」をもったdivエレメントの中にさきほどのアニメーションの定義を記載するということです。
そのとき、classに「sk-center」を付けてあげます。そうすると、アニメーションが画面中央で動いてくれるようになります。
また、FlexパネルのCSS指定のところで「--sk-color: #00ced1;」というCSS変数を追加していました。これは、SpinKitのアニメーションの色の指定です。お好みで色を変えてください。
Javascriptにフェードアウト開始の呼び出しを追加する
Vueでのロード完了として、mountedに以下を追加しましょう。
mounted: function(){
// ・・・
loader_loaded(); // ★これ
}
単純にローディング中に画面全体を非表示にするだけれあれば
Vueでv-cloakという機能があります。ローディング中はこの値が有効ですが、ローディングが完了すると無効となります。
そこで、以下をCSSで指定します。
[v-cloak] {
display: none;
}
そして、ローディング中は非表示にしたい部分に以下のようにv-cloakを付けます。
<div id="top" class="container" v-cloak>
おわり
私は、上記をすでに埋め込み済みの以下のテンプレートをいつも使ってます。
poruruba/express_template
以上