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

プログレスドット見出し

見出しの下でドットが順番に点灯を繰り返すプログレス風の演出。予約状況の読み込み表示やステップ紹介の導入見出しに使えます。

css

プレビュー

ソースコード

HTML

<div class="d02-01-34-stage">
          <span class="d02-01-34-dot" style="--i:0"></span>
          <span class="d02-01-34-dot" style="--i:1"></span>
          <span class="d02-01-34-dot" style="--i:2"></span>
          <span class="d02-01-34-dot" style="--i:3"></span>
          <span class="d02-01-34-dot" style="--i:4"></span>
          <span class="d02-01-34-dot" style="--i:5"></span>
          <h4 class="d02-01-34-h">一歩ずつ、進んでいく。</h4>
        </div>

CSS

.prev.d02-01-34{ background:#f8f7f3; }
        .d02-01-34 .d02-01-34-stage{ text-align:center; }
        .d02-01-34 .d02-01-34-h{
          margin-top:14px;
          font-size:22px;
          font-weight:700;
          color:#1a2333;
          letter-spacing:.08em;
        }
        .d02-01-34 .d02-01-34-dot{
          display:inline-block;
          width:10px; height:10px;
          margin:0 5px;
          border-radius:50%;
          background:#dbe4f0;
          animation:d02-01-34-lit 2.4s ease-in-out infinite;
          animation-delay:calc(var(--i) * .25s);
        }
        @keyframes d02-01-34-lit{
          0%,80%,100%{ background:#dbe4f0; transform:scale(1); }
          40%{ background:#2563eb; transform:scale(1.3); }
        }

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