パーツ番号 08-02-01 ・ CSSのみ

リングスピナー

borderと回転だけで作る定番のローディングリング。WordPressのAjax読み込みや「もっと見る」ボタンの待機表示にそのまま使えます。

css3d

プレビュー

ソースコード

HTML

<div class="d08-02-01-wrap">
          <div class="d08-02-01-spinner"></div>
          <p class="d08-02-01-text">読み込み中…</p>
        </div>

CSS

.d08-02-01-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
        .d08-02-01-spinner{
          width:52px;height:52px;border-radius:50%;
          border:5px solid #e5e7eb;border-top-color:#3b82f6;
          animation:d08-02-01-spin .9s linear infinite;
        }
        .d08-02-01-text{margin:0;font-size:13px;color:#6b7280;letter-spacing:.08em}
        @keyframes d08-02-01-spin{to{transform:rotate(360deg)}}

クラス名 .d08-02-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。