【コピペOK】WEB開発向け！やりすぎてないローディングアニメーション10選

はじめに

この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はローディングアニメーションを紹介したいと思います。
今回のローディングアニメーションはWEB制作で使うようなローディングアニメーションではなく、WEB開発向けのローディングアニメーションを紹介していきます。
処理待ちやページ遷移時に挟み込むようなローディングアニメーションを想定しています！

対象読者

• WEB開発を行っている方

ローディングアニメーション

今回は全てCSSのみで実装しています。

オーソドックスなスピンアニメーション

主張の少ない、いろんな場面で使えるスピンアニメーションです

オーソドックスなスピンアニメーション2

ページ遷移時にピッタリなスピンアニメーションです

オーソドックスなスピンアニメーション3

ボタンの中等に使えそうなスピンアニメーションです

複雑な動きのスピンアニメーション

見ていてとても気持ちの良いアニメーションです

バータイプのアニメーション

使いやすいバータイプのアニメーションです

バータイプのアニメーション2

こちらも使いやすいバータイプのアニメーションです

ドットのアニメーション

使いやすいドットアニメーションです

おしゃれなドットのアニメーション

使いやすい上におしゃれなドットアニメーションです

不規則なドットのアニメーション

使いやすい上に不規則なドットアニメーションです

だんだん大きくなるアニメーション

おしゃれで使いやすいアニメーションです

さいごに

今回はWEB開発向けのローディングアニメーションの紹介を行いました。
結局やりすぎないアニメーションが使いやすく良いなという印象です。
今回はやりすぎてない。オーソドックスなローディングアニメーションから、少し変わったアニメーションまでを紹介しました。
参考にしていただけると幸いです。