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

送料無料プログレスバー

「あと¥1,200で送料無料」のバーが画面表示時に目標割合まで伸びます。WooCommerceのカートで送料無料まであといくらかを促進します。

ecscrollcss

プレビュー

ソースコード

HTML

<div class="d10-01-09-box">
          <p class="d10-01-09-msg">あと <b>¥1,200</b> で送料無料 🚚</p>
          <div class="d10-01-09-track">
            <div class="d10-01-09-fill"></div>
          </div>
          <div class="d10-01-09-labels"><span>¥0</span><span>¥5,000</span></div>
        </div>

CSS

.d10-01-09{background:#f6f7fb}
        .d10-01-09-box{width:250px;background:#fff;border-radius:14px;padding:20px 22px;box-shadow:0 8px 24px rgba(30,40,80,.08)}
        .d10-01-09-msg{margin:0 0 12px;font-size:13px;color:#475569;text-align:center}
        .d10-01-09-msg b{color:#4f46e5}
        .d10-01-09-track{height:12px;border-radius:6px;background:#eef2ff;overflow:hidden}
        .d10-01-09-fill{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#6366f1,#22c55e);transition:width 1.1s cubic-bezier(.4,0,.2,1)}
        .d10-01-09.is-in .d10-01-09-fill{width:76%}
        .d10-01-09-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:#94a3b8}

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