ローディング画面を変えました

ブログのローディング画面を変えました。ページを開いたとき、回し車を走るハムスターと「NOW LOADING」が表示されます。

ロード中・・・

NOW LOADING

これまでの表示から変えたところ

以前は3本のバーが上下に動き、「ロード中・・・」と表示されるシンプルな画面でした。今回はその部分をハムスターのGIFに差し替えています。

GIFは背景を透過し、表示サイズは150×150pxにしました。画像自体も同じ大きさなので、画面上で無理に拡大はしていません。背景色が変わるライトモードとダークモードの両方で使えるようにしています。無料版だと150x150しかダウンロードできなかったのでまぁ仕方ないです。ちょっとガビガビだけどロード画面だしいいでしょう。

使っているアニメーションは、Hamster loader（LottieFiles）です。利用条件はLottie Simple Licenseに記載されています。

ローディング画面は、ページの読み込みが完了するとフェードアウトします。Hugoの共通テンプレートに置いているため、トップページでも記事ページでも同じ表示です。このブログの技術構成で触れた、手作りのテンプレートを少し変えた形ですね。

読み込みが速いと、ハムスターは一瞬しか見えないかもしれません（ユーザ的にはまぁ見えないほうがいいのだけれど）。じっくり見たい場合は、上の変更後のプレビューをどうぞ。