タスク進捗バー一覧

<div class="d05-05-08-card">
          <div class="d05-05-08-head">プロジェクト進捗</div>
          <div class="d05-05-08-row">
            <div class="d05-05-08-top"><span>サイトリニューアル</span><b>82%</b></div>
            <div class="d05-05-08-track"><span class="d05-05-08-fill d05-05-08-c1" style="--w:82%"></span></div>
          </div>
          <div class="d05-05-08-row">
            <div class="d05-05-08-top"><span>LP制作</span><b>60%</b></div>
            <div class="d05-05-08-track"><span class="d05-05-08-fill d05-05-08-c2" style="--w:60%"></span></div>
          </div>
          <div class="d05-05-08-row">
            <div class="d05-05-08-top"><span>ブログ移行</span><b>45%</b></div>
            <div class="d05-05-08-track"><span class="d05-05-08-fill d05-05-08-c3" style="--w:45%"></span></div>
          </div>
          <div class="d05-05-08-row">
            <div class="d05-05-08-top"><span>SEO対策</span><b>93%</b></div>
            <div class="d05-05-08-track"><span class="d05-05-08-fill d05-05-08-c4" style="--w:93%"></span></div>
          </div>
        </div>

.d05-05-08{background:#f8fafc}
        .d05-05-08-card{width:280px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px 18px;box-shadow:0 6px 18px rgba(15,23,42,.06)}
        .d05-05-08-head{font-size:12px;font-weight:700;color:#475569;margin-bottom:14px}
        .d05-05-08-row{margin-bottom:12px}
        .d05-05-08-row:last-child{margin-bottom:0}
        .d05-05-08-top{display:flex;justify-content:space-between;font-size:12px;color:#334155;margin-bottom:5px}
        .d05-05-08-top b{font-weight:700;color:#0f172a}
        .d05-05-08-track{height:8px;background:#eef2f7;border-radius:8px;overflow:hidden}
        .d05-05-08-fill{display:block;height:100%;width:0;border-radius:8px;transition:width .9s cubic-bezier(.22,1,.36,1)}
        .io-reveal.is-in .d05-05-08-fill{width:var(--w)}
        .d05-05-08-c1{background:#3b82f6}.d05-05-08-c2{background:#8b5cf6}.d05-05-08-c3{background:#f59e0b}.d05-05-08-c4{background:#22c55e}