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

ポイント/マイル表示ウィジェット

保有ポイント数と次の特典までの進捗バーを表示するウィジェットです。画面内に入るとバーが伸び、MemberPressの会員向けポイント制度の表示に向いています。

membershipscrollcss

プレビュー

ソースコード

HTML

<div class="d10-05-04-widget io-reveal">
          <div class="d10-05-04-top">
            <span class="d10-05-04-label">保有ポイント</span>
            <span class="d10-05-04-pt">3,200<small>pt</small></span>
          </div>
          <div class="d10-05-04-bar"><span class="d10-05-04-fill"></span></div>
          <p class="d10-05-04-next">次の特典まであと 800pt</p>
        </div>

CSS

.d10-05-04-widget{width:100%;max-width:260px}
        .d10-05-04-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
        .d10-05-04-label{font-size:12px;color:#64748b;font-weight:600}
        .d10-05-04-pt{font-size:20px;font-weight:800;color:#0f172a}
        .d10-05-04-pt small{font-size:11px;font-weight:600;margin-left:2px}
        .d10-05-04-bar{width:100%;height:10px;border-radius:999px;background:#e2e8f0;overflow:hidden}
        .d10-05-04-fill{
          display:block;height:100%;width:0;border-radius:999px;
          background:linear-gradient(90deg,#06b6d4,#3b82f6);
          transition:width 1.2s ease;
        }
        .d10-05-04-widget.is-in .d10-05-04-fill{width:80%}
        .d10-05-04-next{margin:10px 0 0;font-size:11.5px;color:#475569}

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