概要
Blazorで起動時のローディング画面を変更するための方法のメモ。
背景
BlazorのデフォルトテンプレートからWEBサイトを作成すると、起動時のローディング画面は下図のような[Loading...]と表示されるだけの非常にシンプルな画面となっています。
 |
|---|
少し味気ないので、今風のWEBサイトのようにアニメーションでローディング画面を表示できるようにしたいと思います。
実装方法
変更対象のファイル
wwwroot直下のindex.htmlが対象のファイルになります。
wwwroot
├ index.html
…(略)
中を見ると下記のようにLoading...と記載されたappタグがあります。
この部分を変更することで、ローディング画面をおしゃれにできます。
index.html
<!DOCTYPE html><html><head>…(略)
</head><body><app>Loading...</app>…(略)
</body>CSSの追加
該当の個所にスピナーを埋め込みます。
今回は下記のようなシンプルなCSSで実現しているものを埋め込みます。
https://projects.lukehaas.me/css-loaders/
お好みの色の設定をして、ViewSourceを押せばCSSが出力されるので取得します。
loader.css
.loader,.loader:before,.loader:after{border-radius:50%;width:2.5em;height:2.5em;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:load71.8sinfiniteease-in-out;animation:load71.8sinfiniteease-in-out;}.loader{color:#ff8000;font-size:10px;margin:80pxauto;position:relative;text-indent:-9999em;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-0.16s;animation-delay:-0.16s;}.loader:before,.loader:after{content:'';position:absolute;top:0;}.loader:before{left:-3.5em;-webkit-animation-delay:-0.32s;animation-delay:-0.32s;}.loader:after{left:3.5em;}@-webkit-keyframesload7{0%,80%,100%{box-shadow:02.5em0-1.3em;}40%{box-shadow:02.5em00;}}@keyframesload7{0%,80%,100%{box-shadow:02.5em0-1.3em;}40%{box-shadow:02.5em00;}}画面の中央に配置するためのレイアウトのCSSを追加します。
loader.css
.loading{position:fixed;left:0px;top:0px;width:100%;height:100%;z-index:9999999999;overflow:hidden;}作成したCSSの参照を追加し、appタグ内にスピナーを配置すれば完了です。
index.html
<!DOCTYPE html><html><head>…(略)
<linkhref="css/loader.css"rel="stylesheet"/></head><body><app><divclass="loading"><divclass="loader"><divclass="dot-loader"></div><divclass="dot-loader dot-loader--2"></div><divclass="dot-loader dot-loader--3"></div></div></div></app>…(略)
</body>以上で完了です。
CSSのスピナー等、いろいろなリソースがありますので、自分の好みに合わせて変えてみてください。
下記などもよさそうです。
https://github.com/jlong/css-spinners