CSS によるローディングアニメーションのサンプルと簡単な実装方法

CSS を利用したローディングアニメーションのサンプルは既に山ほど Web 上に公開されていますが、別件でコーディングをしていた流れで、たまたまローディングアニメーションのコードも適当に作ってみたので、いくつかのサンプルと共に、jQuery や外部モジュールも利用せず、実際に利用するための簡易的な方法をご紹介します。 まずは、今回適当に作成したローディングアニメーションのデモをご覧ください。 See the Pen Simple CSS Spinner valiation by digistate (@digistate) on CodePen. この HTML と CSS を基礎にして、以下に実際に利用するための手順をまとめます。 HTML の構造 各ローディングアニメーション要素の HTML の構造は至ってシンプルです。 <div class="box"> <!-- type1 〜 t