パーツ番号 04-10-05 ・ CSSのみ

円形プログレスリング付きステップ見出し

円グラフ状のリングで進捗を表現した静止見出しです。会員登録ウィザードやアンケートフォームの現在ステップ表示に向いています。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-10-05-wrap">
          <div class="d04-10-05-ring">
            <div class="d04-10-05-ring-inner"><span class="d04-10-05-ring-text">2/4</span></div>
          </div>
          <div class="d04-10-05-info">
            <h4 class="d04-10-05-title">配送設定</h4>
            <p class="d04-10-05-desc">残り2ステップで完了します</p>
          </div>
        </div>

CSS

.d04-10-05-wrap{display:flex;align-items:center;gap:16px;width:100%;max-width:300px;font-family:sans-serif}
        .d04-10-05-ring{position:relative;flex:none;width:64px;height:64px;border-radius:50%;background:conic-gradient(#6366f1 0deg 180deg,#e5e7eb 180deg 360deg);display:flex;align-items:center;justify-content:center}
        .d04-10-05-ring-inner{position:absolute;width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
        .d04-10-05-ring-text{font-size:12px;font-weight:800;color:#4338ca}
        .d04-10-05-title{font-size:15px;font-weight:700;color:#1f2937;margin:0 0 4px}
        .d04-10-05-desc{margin:0;font-size:11.5px;color:#6b7280}

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