円形プログレスリング複数

<div class="d05-04-03-row">
          <div class="d05-04-03-ring" style="--d05-04-03-val:88;--d05-04-03-col:#2b5cff">
            <svg viewBox="0 0 80 80"><circle class="d05-04-03-bg" cx="40" cy="40" r="34"/><circle class="d05-04-03-fg" cx="40" cy="40" r="34"/></svg>
            <span>88%</span><em>売上目標</em>
          </div>
          <div class="d05-04-03-ring" style="--d05-04-03-val:64;--d05-04-03-col:#22b07d">
            <svg viewBox="0 0 80 80"><circle class="d05-04-03-bg" cx="40" cy="40" r="34"/><circle class="d05-04-03-fg" cx="40" cy="40" r="34"/></svg>
            <span>64%</span><em>新規獲得</em>
          </div>
          <div class="d05-04-03-ring" style="--d05-04-03-val:95;--d05-04-03-col:#f4a72b">
            <svg viewBox="0 0 80 80"><circle class="d05-04-03-bg" cx="40" cy="40" r="34"/><circle class="d05-04-03-fg" cx="40" cy="40" r="34"/></svg>
            <span>95%</span><em>継続率</em>
          </div>
        </div>

.d05-04-03 .d05-04-03-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
        .d05-04-03 .d05-04-03-ring{position:relative;width:88px;text-align:center}
        .d05-04-03 .d05-04-03-ring svg{width:80px;height:80px;transform:rotate(-90deg)}
        .d05-04-03 .d05-04-03-bg{fill:none;stroke:#e6ebf3;stroke-width:8}
        .d05-04-03 .d05-04-03-fg{fill:none;stroke:var(--d05-04-03-col);stroke-width:8;stroke-linecap:round;
          stroke-dasharray:214;stroke-dashoffset:214;transition:stroke-dashoffset 1.3s ease}
        .d05-04-03.is-in .d05-04-03-ring:nth-child(1) .d05-04-03-fg{stroke-dashoffset:calc(214 - 214 * 88/100);transition-delay:.1s}
        .d05-04-03.is-in .d05-04-03-ring:nth-child(2) .d05-04-03-fg{stroke-dashoffset:calc(214 - 214 * 64/100);transition-delay:.35s}
        .d05-04-03.is-in .d05-04-03-ring:nth-child(3) .d05-04-03-fg{stroke-dashoffset:calc(214 - 214 * 95/100);transition-delay:.6s}
        .d05-04-03 .d05-04-03-ring span{position:absolute;top:26px;left:0;right:0;font-size:18px;font-weight:800;color:#333}
        .d05-04-03 .d05-04-03-ring em{display:block;margin-top:4px;font-size:11px;color:#5a6273;font-style:normal}