みなさんこんにちは、プロクラスの村瀬です。
今回はローディング中のアニメーションとして使えるアイコンをカスタマイズしてサイトに組み込める便利なサイト【Loadership】をご紹介します。
ローディングのアニメーションとは？
上の画像のような感じで動画やサイト表示の際に丸いドットがくるくると動いているのを見かけることはありませんか？
これは動画やサイトが表示の準備をしている最中に表示されるアニメーションで、この動きが入ることでユーザーがページから離脱するのを防ぐ働きがあります。
このアイコン、割とフリーで配布されているサイトはあるものの、色の変更などカスタマイズができるものがなかなか見つけられず苦労した経験があり…。
今回色々と自分好みにカスタマイズできるサイトを見つけましたのでご紹介します！
「Loadership」ってどんなサイト？
CSSで調整されたローディングアニメーションをコピペで気軽に使用できるサイトです。カスタマイズ性が高く、色や各部品のサイズやスピードなんかも調整できます。商用利用も可能です。
上記画像の上段、右から2番目の「Dot Circular Scale」を選択してカスタマイズしてみました！
ドットの数を少なく、サイズを大きくし、色とアニメーションのスピードを遅く変更してみました。実際動くとこのような感じで表示されます。
See the Pen Untitled by 村瀬さやか (@ontwerph-the-solid) on CodePen.
あとはHTMLとCSSがコピーできますので任意の場所に設置してみてください。
視覚で確認しながら見た目を整えられるので、とてもお手軽にカスタマイズできました！他にも色々なアニメーションが用意されていますので、ぜひサイト上で試してみてください！