見栄えからアニメーションまで基本的にCSS(一部SVGも使用)を使って作成されているユニークなローディングアニメーションを、CodePenで公開されている中から紹介します。 ローディングはそんなに長い時間表示させることは少ないですし、自分の場合はサクっと汎用的なシンプルなデザインのものを実装することがほとんどですが、こういった部分まで拘りたいとかちょっと面白いアニメーション付けたいってときに参考になるものやインスピレーションもらえそうです。 Loading Idea HTMLとCSSで作成した三角形を並べ、それらをタイミングずらしてopacityを使うことで見栄えを実装しています。 このデモはすべて同じカラーですが、カラーをバランス良く異なるものに設定するのも良さそうです。
![CSS(一部SVGも使用)で作成されたユニークなローディングアニメーション 15 - NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/feb5344b24b128e8f3418ddf1e4f3f183e88cbe8/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2F15-css-unique-loading-animations.png)