タスク進捗バー一覧ウィジェット(固定値)

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

.d11-08-08{background:#f8fafc}
        .d11-08-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)}
        .d11-08-08-head{font-size:12px;font-weight:700;color:#475569;margin-bottom:14px}
        .d11-08-08-row{margin-bottom:12px}
        .d11-08-08-row:last-child{margin-bottom:0}
        .d11-08-08-top{display:flex;justify-content:space-between;font-size:12px;color:#334155;margin-bottom:5px}
        .d11-08-08-top b{font-weight:700;color:#0f172a}
        .d11-08-08-track{height:8px;background:#eef2f7;border-radius:8px;overflow:hidden}
        .d11-08-08-fill{display:block;height:100%;border-radius:8px}
        .d11-08-08-w1{width:82%}.d11-08-08-w2{width:60%}.d11-08-08-w3{width:45%}.d11-08-08-w4{width:93%}
        .d11-08-08-c1{background:#3b82f6}.d11-08-08-c2{background:#8b5cf6}.d11-08-08-c3{background:#f59e0b}.d11-08-08-c4{background:#22c55e}