パーツ番号 05-07-03 ・ CSSのみ

横棒グラフ・ランキング演出

順位付きの横棒グラフが上位から順に伸びていく。店舗別・商品別ランキング表示に最適。

css

プレビュー

ソースコード

HTML

<div class="d05-07-03 io-reveal">
          <div class="d05-07-03-row"><span class="d05-07-03-rank">1</span><span class="d05-07-03-name">東京店</span><div class="d05-07-03-track"><div class="d05-07-03-bar" style="--w:92%"></div></div><span class="d05-07-03-val">92</span></div>
          <div class="d05-07-03-row"><span class="d05-07-03-rank">2</span><span class="d05-07-03-name">大阪店</span><div class="d05-07-03-track"><div class="d05-07-03-bar" style="--w:78%"></div></div><span class="d05-07-03-val">78</span></div>
          <div class="d05-07-03-row"><span class="d05-07-03-rank">3</span><span class="d05-07-03-name">名古屋店</span><div class="d05-07-03-track"><div class="d05-07-03-bar" style="--w:65%"></div></div><span class="d05-07-03-val">65</span></div>
          <div class="d05-07-03-row"><span class="d05-07-03-rank">4</span><span class="d05-07-03-name">福岡店</span><div class="d05-07-03-track"><div class="d05-07-03-bar" style="--w:50%"></div></div><span class="d05-07-03-val">50</span></div>
          <div class="d05-07-03-row"><span class="d05-07-03-rank">5</span><span class="d05-07-03-name">札幌店</span><div class="d05-07-03-track"><div class="d05-07-03-bar" style="--w:34%"></div></div><span class="d05-07-03-val">34</span></div>
        </div>

CSS

.d05-07-03{width:100%;display:flex;flex-direction:column;gap:10px}
        .d05-07-03-row{display:flex;align-items:center;gap:8px;font-size:11px}
        .d05-07-03-rank{width:16px;height:16px;border-radius:50%;background:#111827;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;flex:none}
        .d05-07-03-name{width:52px;flex:none;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .d05-07-03-track{flex:1;background:#f1f5f9;border-radius:4px;height:10px;overflow:hidden}
        .d05-07-03-bar{height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#3b82f6,#06b6d4)}
        .d05-07-03-val{width:24px;text-align:right;color:#111827;font-weight:600;flex:none;opacity:0}
        .d05-07-03.is-in .d05-07-03-bar{animation:d05-07-03-grow 1s cubic-bezier(.2,.8,.2,1) forwards}
        .d05-07-03.is-in .d05-07-03-val{animation:d05-07-03-fade .4s ease forwards}
        .d05-07-03-row:nth-child(1) .d05-07-03-bar{animation-delay:0s}
        .d05-07-03-row:nth-child(2) .d05-07-03-bar{animation-delay:.15s}
        .d05-07-03-row:nth-child(3) .d05-07-03-bar{animation-delay:.3s}
        .d05-07-03-row:nth-child(4) .d05-07-03-bar{animation-delay:.45s}
        .d05-07-03-row:nth-child(5) .d05-07-03-bar{animation-delay:.6s}
        .d05-07-03-row:nth-child(1) .d05-07-03-val{animation-delay:.8s}
        .d05-07-03-row:nth-child(2) .d05-07-03-val{animation-delay:.95s}
        .d05-07-03-row:nth-child(3) .d05-07-03-val{animation-delay:1.1s}
        .d05-07-03-row:nth-child(4) .d05-07-03-val{animation-delay:1.25s}
        .d05-07-03-row:nth-child(5) .d05-07-03-val{animation-delay:1.4s}
        @keyframes d05-07-03-grow{to{width:var(--w)}}
        @keyframes d05-07-03-fade{to{opacity:1}}

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