パーツ番号 04-15-01 ・ CSSのみ

進捗バー付きアンケート質問カード(60%地点)

回答の進捗を示すバーを60%地点で固定表示した質問カード。WordPressのアンケートフォームや診断コンテンツの途中経過表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-15-01-card">
          <div class="d04-15-01-top">
            <span class="d04-15-01-qnum">Q3 / 5</span>
            <span class="d04-15-01-pct">60%</span>
          </div>
          <div class="d04-15-01-bar"><div class="d04-15-01-fill"></div></div>
          <p class="d04-15-01-q">このサービスを友人に勧めたいと思いますか?</p>
        </div>

CSS

.d04-15-01-card{width:100%;max-width:250px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px}
        .d04-15-01-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
        .d04-15-01-qnum{font-size:11px;font-weight:700;color:#6366f1}
        .d04-15-01-pct{font-size:11px;font-weight:700;color:#94a3b8}
        .d04-15-01-bar{width:100%;height:8px;border-radius:99px;background:#eef0f3;overflow:hidden;margin-bottom:14px}
        .d04-15-01-fill{width:60%;height:100%;border-radius:99px;background:linear-gradient(90deg,#6366f1,#8b5cf6)}
        .d04-15-01-q{font-size:13px;color:#1a1d24;font-weight:600;line-height:1.5}

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