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

横棒プログレスバー付きフォーム見出し

進捗率60%地点で固定した横棒バーとパーセント表示です。セミナー申込みや資料ダウンロードフォームの見出し部分に活用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-10-02-wrap">
          <div class="d04-10-02-head">
            <h4 class="d04-10-02-title">お申し込みフォーム</h4>
            <span class="d04-10-02-pct">60%</span>
          </div>
          <div class="d04-10-02-bar"><div class="d04-10-02-fill"></div></div>
          <p class="d04-10-02-sub">ステップ 2 / 3：お届け先情報の入力</p>
        </div>

CSS

.d04-10-02-wrap{width:100%;max-width:300px;font-family:sans-serif}
        .d04-10-02-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
        .d04-10-02-title{font-size:14px;font-weight:700;color:#1f2937;margin:0}
        .d04-10-02-pct{font-size:13px;font-weight:800;color:#6366f1}
        .d04-10-02-bar{width:100%;height:8px;border-radius:99px;background:#e5e7eb;overflow:hidden}
        .d04-10-02-fill{width:60%;height:100%;border-radius:99px;background:linear-gradient(90deg,#6366f1,#8b5cf6)}
        .d04-10-02-sub{margin:8px 0 0;font-size:11.5px;color:#6b7280}

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