積み上げ棒/比率バー

<div class="d05-04-10-wrap">
          <div class="d05-04-10-bar">
            <div class="d05-04-10-seg" style="--d05-04-10-w:42%;--d05-04-10-c:#2b5cff"><span>42%</span></div>
            <div class="d05-04-10-seg" style="--d05-04-10-w:28%;--d05-04-10-c:#22b07d"><span>28%</span></div>
            <div class="d05-04-10-seg" style="--d05-04-10-w:18%;--d05-04-10-c:#f4a72b"><span>18%</span></div>
            <div class="d05-04-10-seg" style="--d05-04-10-w:12%;--d05-04-10-c:#8a5cff"><span>12%</span></div>
          </div>
          <ul class="d05-04-10-legend">
            <li><i style="background:#2b5cff"></i>直販</li>
            <li><i style="background:#22b07d"></i>代理店</li>
            <li><i style="background:#f4a72b"></i>EC</li>
            <li><i style="background:#8a5cff"></i>その他</li>
          </ul>
        </div>

.d05-04-10 .d05-04-10-wrap{width:100%}
        .d05-04-10 .d05-04-10-bar{display:flex;height:44px;border-radius:10px;overflow:hidden;background:#eef1f7}
        .d05-04-10 .d05-04-10-seg{width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
          background:var(--d05-04-10-c);transition:width 1.1s cubic-bezier(.22,1,.36,1)}
        .d05-04-10.is-in .d05-04-10-seg{width:var(--d05-04-10-w)}
        .d05-04-10 .d05-04-10-seg span{color:#fff;font-size:12px;font-weight:700;white-space:nowrap;opacity:0;transition:opacity .4s ease .8s}
        .d05-04-10.is-in .d05-04-10-seg span{opacity:1}
        .d05-04-10.is-in .d05-04-10-seg:nth-child(2){transition-delay:.15s}
        .d05-04-10.is-in .d05-04-10-seg:nth-child(3){transition-delay:.3s}
        .d05-04-10.is-in .d05-04-10-seg:nth-child(4){transition-delay:.45s}
        .d05-04-10 .d05-04-10-legend{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
        .d05-04-10 .d05-04-10-legend li{display:flex;align-items:center;gap:6px;font-size:12px;color:#5a6273}
        .d05-04-10 .d05-04-10-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}