トレンドはフレンド

簡単コピペ!CSS, SVGで作れるローディングアニメーションの参考サイト

この記事は約4分で読めます。

よこのじ(@yokonoji_work)です。

ページ読み込み時間の短さはユーザーにストレスなく閲覧してもらうために必要なことですが、画像や動画などのコンテンツが多くなってくると、どうしても読み込みに時間がかかってしまいます。

そこで、Now Loading…のような画面を用意することで、ロード中であることを感じさせない工夫が必要となってきます。

今回は簡単にローディングアニメーションを実装するための参考サイトを集めてみましたので、ご紹介します。

コピペで実装できますので、お気に入りのものを見つけてください。

ローディングアニメーションの参考サイト

ローディングバー、スピンなどのスニペットを紹介しているサイトは多くあります。

ここでは、私に響いた美しいローディングアニメーションが紹介されているサイトを一覧でご紹介します。

ここは見るべき!という気に入った順番で紹介していますが、どのサイトも大変素晴らしいということはお伝えしておきたいと思います。

Single Element CSS Spinners

Single Element CSS Spinners

Single Element CSS Spinners
A collection of loading spinners animated with CSS. Each spinner is created from a single div with animation, styling and pseudo-elements applied via CSS.

くるくると回転するタイプのアニメーションを中心に基本的なデザインが揃っています。ソースコードはアニメーション下の<View Source>より確認できます。

作者の他のプロジェクトであるCSSPokemonも一見の価値ありです。

PACE

PACE

Page not found · GitHub Pages

CSSとJavaScriptを組み合わせて、ページの読み込みを進捗バーや%表示で表現できます。あとどれだけ待てば読み込みが完了するのかわかるようになる、うれしい機能を簡単に実装できます。

SVG-Loaders

SVG-Loaders

SVG Loaders - Sam Herbert

SVG形式の画像を使うことでローディングアニメーションを表現できます。基本的なアニメーションパターンですが、高品位な印象を受けます。

Loaders.css

Loaders.css

https://connoratherton.com/loaders

CSSでつくられたローディングアニメーションのデモ一覧を見ることができます。ただ回転するだけではない工夫があるので、楽しいアニメーションになっています。

Loading.io

Loading.io

Attention Required! | Cloudflare

くるくる回るアニメーションや進捗度を表示できるプログレスバーなどを実装できます。

有料プランであれば、より目を引く楽しげなデザインも利用できます。プログレスバーの方は、実績件数のような表示に利用できそうですね。

SpinKit

SpinKit

SpinKit
Simple CSS Spinners

基本的なアニメーションが揃っています。動きがリズミカルでロード中に待たされているということが感じにくくなりそうです。ソースコードはアニメーション上部の<>Sourceより確認できます。

その他プロジェクトのMoving Lettersを利用すれば、動きのある華やかなWebサイトをつくることができそうです。

30 CSS Loading Animations for your Website

30 CSS Loading Animations for your Website

Page Not Found - Design Woop

ありきたりなアニメーションではないものを使いたいと思ったら、ここを見てみてください。電池が充電されたり、車が走ったり、本でドミノ倒しされていたり、見る人を飽きさせないアニメーションが揃っています。

83 CSS Loaders

83 CSS Loaders

153 CSS Loaders
Collection of HTML and CSS loader animation for website. Update of March 2020 collection. 17 new examples.

83のアニメーションが紹介されています。シンプルなもの、かわいいもの、かっこいいものなど自身のサイトのイメージに合ったものが見つかるのではないでしょうか?フライパンをパンケーキを振り上げてひっくり返す、ユニークなものもあります。

他のサイトでの紹介では「71 CSS LOADERS」となっていましたので、どんどん追加されてる?

CSS Loader

CSS Loader

CSS Loader
Simple loaders for your web applications using only one div and pure CSS.

ボールが跳ねたり、スマートフォンが揺れたり、画面全体をブロックが走ったりと多彩な表現があります。遊び心を取り入れたい場合には、うってつけです。

 

注目記事:CSSアニメーション animationプロパティの使い方
注目記事:CSSアニメーションで「バウンド」を実装する

 

[itemlink post_id=”3055″]

タイトルとURLをコピーしました