ISSEN 
はじめに
この記事の概要
こんにちは、株式会社TOKOSのスギタです！
今回はローディングアニメーションを紹介したいと思います。
今回のローディングアニメーションはWEB制作で使うようなローディングアニメーションではなく、WEB開発向けのローディングアニメーションを紹介していきます。
処理待ちやページ遷移時に挟み込むようなローディングアニメーションを想定しています！
対象読者
- WEB開発を行っている方
ローディングアニメーション
今回は全てCSSのみで実装しています。
オーソドックスなスピンアニメーション
主張の少ない、いろんな場面で使えるスピンアニメーションです
See the Pen loading by tks-sugita (@tks-sugita) on CodePen.
オーソドックスなスピンアニメーション2
ページ遷移時にピッタリなスピンアニメーションです
See the Pen Untitled by tks-sugita (@tks-sugita) on CodePen.
オーソドックスなスピンアニメーション3
ボタンの中等に使えそうなスピンアニメーションです
See the Pen Untitled by tks-sugita (@tks-sugita) on CodePen.
複雑な動きのスピンアニメーション
見ていてとても気持ちの良いアニメーションです
See the Pen Untitled by tks-sugita (@tks-sugita) on CodePen.
バータイプのアニメーション
使いやすいバータイプのアニメーションです
See the Pen Untitled by tks-sugita (@tks-sugita) on CodePen.
バータイプのアニメーション2
こちらも使いやすいバータイプのアニメーションです
See the Pen Untitled by tks-sugita (@tks-sugita) on CodePen.
ドットのアニメーション
使いやすいドットアニメーションです
See the Pen Untitled by tks-sugita (@tks-sugita) on CodePen.
おしゃれなドットのアニメーション
使いやすい上におしゃれなドットアニメーションです
See the Pen Untitled by tks-sugita (@tks-sugita) on CodePen.
不規則なドットのアニメーション
使いやすい上に不規則なドットアニメーションです
See the Pen Untitled by tks-sugita (@tks-sugita) on CodePen.
だんだん大きくなるアニメーション
おしゃれで使いやすいアニメーションです
See the Pen Untitled by tks-sugita (@tks-sugita) on CodePen.
さいごに
今回はWEB開発向けのローディングアニメーションの紹介を行いました。
結局やりすぎないアニメーションが使いやすく良いなという印象です。
今回はやりすぎてない。オーソドックスなローディングアニメーションから、少し変わったアニメーションまでを紹介しました。
参考にしていただけると幸いです。
