on:2019年1月17日sponsorsシンプルなローディングのアニメーションから、複雑で楽しいローディングのアニメーションまで、CSSで実装されたローディングアニメーションを紹介します。ほとんどが外部ファイルとclassを加えるだけの簡単実装で、いざという時用にブックマークしておきたいものばかりです。下記の回転しながら整列するアニメーションもCSSのみで実装されています。-GitHubdiv要素一つにclassを与えるだけのドットで構成されたシンプルなローディングアニメーション。ドットのサイズやカラーも簡単に変更できます。-GitHubHTML+CSSのみでも、Vue.jsのコンポーネントとしても実装できるローディングアニメーション。シンプルなデザインながら、複雑な動きが楽しめます。-GitHubパフォーマンス重視の楽しいアニメーションが多く揃ったローディングアニメーション。Angularなどにも移植されています。-GitHubスクリーンリーダー用のテキスト(Loading...)をdiv要素で内包して実装されたローディングアニメーション。div一つなのに、かなり複雑なアニメーションです。ローダーにはpx単位のフォントサイズが与えられいるので、font-sizeを変更するだけでローダーのサイズを変更できます。-GitHubdiv要素一つだけで、移動や不透明度などのアニメーションで複雑な動きを再現したローディングアニメーション。Sassファイルも用意されており、カスタマイズも簡単です。-GitHubCSSと最小限のHTMLで実装されたシンプルなローディングアニメーション。Sassファイルも用意されており、カスタマイズも簡単です。class="loading-indicator">Loading...</div>Loading.css好きな画像にローディング用のアニメーションを適用するスタイルシート。ローディングだけでなく、ボタンなどに利用してもOKです。CSS一つひとつがかなり面白い動きをするローディングアニメーション。その分HTMLも複数の要素で実装されています。preloadersドットが円に沿って動くローディングアニメーション。数や動きが異なるさまざまなパターンが用意されており、楽しめます。-GitHubテキストで実装されたローディングアニメーション。テキストなのでインライン要素として配置できます。-GitHub最後は、SVGのローディングアニメーション。SVGファイルなので、カラーやサイズはHTMLで簡単にカスタマイズできます。