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

進捗チップ(ステップ状態)

完了(✓)・進行中(回転)・未着手を色とアイコンで示すチップ列。フォームの入力ステップや申込みフローの現在地表示に使えます。

css3dinput

プレビュー

ソースコード

HTML

<div class="d09-01-08-steps">
          <span class="d09-01-08-chip d09-01-08-done"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12l5 5L20 6"/></svg>入力</span>
          <span class="d09-01-08-chip d09-01-08-doing"><span class="d09-01-08-spin"></span>確認</span>
          <span class="d09-01-08-chip d09-01-08-todo"><span class="d09-01-08-num">3</span>完了</span>
        </div>

CSS

.d09-01-08-steps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
        .d09-01-08-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:6px 12px;border-radius:16px}
        .d09-01-08-done{background:#dcfce7;color:#15803d}
        .d09-01-08-doing{background:#dbeafe;color:#1d4ed8}
        .d09-01-08-todo{background:#f1f5f9;color:#94a3b8}
        .d09-01-08-spin{width:12px;height:12px;border-radius:50%;border:2px solid #93c5fd;border-top-color:#1d4ed8;animation:d09-01-08-spin .8s linear infinite}
        @keyframes d09-01-08-spin{to{transform:rotate(360deg)}}
        .d09-01-08-num{width:16px;height:16px;border-radius:50%;background:#cbd5e1;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}

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