CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけで作るプリローダー（ローディングスピナー）の実装方法

CSSだけでプリローダー（ローディングスピナー）を作成する方法を紹介します。画像やJavaScriptに頼らず、borderと@keyframesアニメーションを組み合わせることで、軽量かつシンプルな回転アニメーションを実現できます。

実装のポイント

  • 円形の枠線を作る：border-radius: 50% を指定して要素を完全な円形にします。
  • 一部だけ色を変える：border-top にのみ別の色を指定することで、回転しているように見える視覚効果を生み出します。
  • 無限ループで回転させる：@keyframes で0度から360度までの回転を定義し、infinite を付けて永続的に繰り返します。
  • Safari対応：-webkit- プレフィックスを併記することで、古いSafariでも動作します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .loader {
        border: 16px double #ffee00;
        border-radius: 50%;
        border-top: 16px solid #7434db;
        width: 140px;
        height: 140px;
        -webkit-animation: loader 2s linear infinite; /* Safari */
        animation: loader 2s linear infinite;
    }
    @-webkit-keyframes loader {
        0% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
    @keyframes loader {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
</head>
<body>
<h1>プリローダー作成のサンプル</h1>
<div class="loader"></div>
</body>
</html>

実行結果

上記のコードを実行すると、黄色の二重線で描かれた円形の枠のうち上部だけが紫色になり、その部分が2秒かけて1周する回転アニメーションとして表示されます。これにより、ページの読み込み中であることをユーザーに直感的に伝えられます。

CSSだけで作るプリローダー（ローディングスピナー）の実装方法

カスタマイズのヒント

スピナーの見た目はCSSの値を変えるだけで簡単に調整できます。#ffee00 や #7434db の色指定を変更すれば配色を、width・height を変更すればサイズを、2s の部分を短くすれば回転速度をそれぞれ自由にカスタマイズ可能です。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>