こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
ページの読み込み中や、フォーム送信後の一瞬の待機時間。
そんな時に欠かせないのが、「ぐるぐる回るローディングスピナー」です！
「今処理中です」「もうすぐ動きます」といったユーザーへの視覚的なサインは、ユーザーの不安を和らげ、離脱率の低下にもつながる大切なUIのひとつです。
スピナーというとJavaScriptや画像を使うイメージを持っている方も多いですが、実はCSSだけで作れるんです。しかも、軽くて高性能、見た目もスタイリッシュ！
この記事では、CSSで作るローディングスピナーの基本から応用まで、すぐに使えるサンプルコードとあわせて詳しくご紹介します。
CSSスピナーの基本構造と考え方
CSSだけでアニメーションするには、@keyframes を使って回転を作るのが王道パターンです！
HTMLでシンプルな div 要素を作り、CSSでその要素に「回転する枠」をつけることで、よく見る「ぐるぐる」が完成します。
パターン①：一番シンプルな円形スピナー
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
これは最もベーシックでよく使われるスタイルですね！
一部の枠線だけ色を変えることで、「回転している感」を出すことができます。
パターン②：ドットが追いかける波紋型
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
3つのドットがピョンピョンと順番に動くアニメーション。
かわいらしく、親しみのある演出がしたいときにぴったりです！
パターン③：丸が伸び縮みするパルス風
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このタイプは「処理中」のやわらかい印象がほしい場面で便利！
色をグラデーションにするとさらに映える見た目に。
実装上のポイントと注意点
CSSスピナーをWebサイトに取り入れる際は、以下の点にも注意しておきましょう。
- アクセシビリティの配慮：ローディング中であることをスクリーンリーダーに伝えるには、aria-busy="true" を併用するとベターです。
- スピナーの非表示制御：読み込み完了後は、JavaScriptで display: none; などで非表示にしましょう。
- サイズと色の調整：スピナーの存在感が強すぎるとUIを邪魔するので、程よいサイズ感が大切です。
まとめ：軽くておしゃれなスピナーはCSSで十分！
「読み込み中」の体験は、Webサイトの印象を大きく左右します！
でも、その演出にわざわざJavaScriptを使ったり、GIF画像を用意する必要はありません。
CSSだけで実装できるローディングスピナーは、軽量でスタイリッシュ、さらにカスタマイズも自由自在。
今回ご紹介したようなパターンを参考に、あなたのサイトにも「ぐるぐる」や「ぴょんぴょん」を加えてみてください！
ちょっとした動きで、サイトの体験がグッと快適になりますよ。
satokotadesignキャンペーン実施中！
