CSS cssだけでローディングアニメーションを実装

CSSだけでローディングアニメーションを実装する方法を記載します。

目次

1.実装例
2.解説
3.カスタマイズ
4.まとめ

1.実装例

いきなりですが、実装例を掲載します。

See the Pen ローディング ロゴ by ハスキーに会いたい (@yfpgqlgd-the-builder) on CodePen.

※右下の「Rerun」で何度も再生できます。

かなりシンプルですが、ローディング画面があるのとないのとでは、印象がだいぶ違いますね。
こうしたアニメーションがあると、ユーザーの興味や関心を惹きつけ、サイト滞在率の延長につながる可能性が高まります。

2.解説

それではCSSでどのように制御しているのか、解説していきます。


背景の動き

まず、横幅と高さいっぱいの白背景を用意します。そしてアニメーションで「fadeOut」を指定して、背景が完全に透明になるまでの時間(1.5秒)を記述します。
ですがこのままだと、白背景がすぐに透過されてしまいますので、2.5秒の遅延を付けます。

ロゴの動き

ロゴも背景の時と同じく、表示時間(2秒)を設定し、@keyframesで「下からロゴを表示してその後消える」の動きを記述します。
また、こちらには0.5秒の遅延を付けています。

これらのコードを記述すれば、ローディングアニメーションが完成します。

3.カスタマイズ

CSSだけで作成しているので、カスタマイズがしやすくなっています。
なので、カスタマイズ例を2点紹介します。

パターン1

See the Pen ローディング ロゴ カスタマイズ by ハスキーに会いたい (@yfpgqlgd-the-builder) on CodePen.

こちらは、背景を変更し、ロゴ部分を画像ではなくテキストを入れてみました。
また、テキストが透明になるまでの動きを上下入れ替えてみました。

パターン2

See the Pen
ローディング ロゴ カスタマイズ02
by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.

次は少し応用しています。
ロードしている感が増したと思います。気になった方は是非コードをご覧ください。

4.まとめ

javascriptを使用しない分、読み込み速度が早く、開発や保守がしやすいことがメリットになると思います。
逆にデメリットとしては、ページをリロードすると再度ローディングアニメーションが実行されてしまうので、そこの制御はjsを使用せざるを得ないところですね。
ですが、かなり容易に実装でき、カスタマイズ性が高いのでお気に入りのアニメーションです。
それではまた…