パーツ番号 06-03-03 ・ CSSのみ

円形スキルメーター

円グラフ状のスキル達成率3つ。画面内に入ると弧が伸びます(io-reveal)。担当者の強みをコンパクトに見せる紹介欄に。

scrollcss

プレビュー

ソースコード

HTML

<div class="d06-03-03-wrap io-reveal">
          <div class="d06-03-03-item">
            <svg viewBox="0 0 80 80" width="80" height="80"><circle class="d06-03-03-bg" cx="40" cy="40" r="34"/><circle class="d06-03-03-fg" cx="40" cy="40" r="34" style="--p:88"/></svg>
            <span class="d06-03-03-val">88%</span><span class="d06-03-03-t">企画</span>
          </div>
          <div class="d06-03-03-item">
            <svg viewBox="0 0 80 80" width="80" height="80"><circle class="d06-03-03-bg" cx="40" cy="40" r="34"/><circle class="d06-03-03-fg" cx="40" cy="40" r="34" style="--p:72"/></svg>
            <span class="d06-03-03-val">72%</span><span class="d06-03-03-t">開発</span>
          </div>
          <div class="d06-03-03-item">
            <svg viewBox="0 0 80 80" width="80" height="80"><circle class="d06-03-03-bg" cx="40" cy="40" r="34"/><circle class="d06-03-03-fg" cx="40" cy="40" r="34" style="--p:95"/></svg>
            <span class="d06-03-03-val">95%</span><span class="d06-03-03-t">運用</span>
          </div>
        </div>

CSS

.d06-03-03-wrap{display:flex;gap:18px}
        .d06-03-03-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px}
        .d06-03-03-item svg{transform:rotate(-90deg)}
        .d06-03-03-bg{fill:none;stroke:#e6eaf3;stroke-width:8}
        .d06-03-03-fg{fill:none;stroke:url(#none);stroke:#6a8dff;stroke-width:8;stroke-linecap:round;stroke-dasharray:214;stroke-dashoffset:214;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
        .d06-03-03-wrap.is-in .d06-03-03-fg{stroke-dashoffset:calc(214 - 214 * var(--p) / 100)}
        .d06-03-03-val{position:absolute;top:30px;font-weight:700;color:#243053;font-size:15px}
        .d06-03-03-t{font-size:12px;color:#8590ad}

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