Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1128" href="#report"><span class="tbx-1128__chart" aria-hidden="true"><svg viewBox="0 0 120 120"><circle class="tbx-1128__track" cx="60" cy="60" r="46"/><circle class="tbx-1128__fill" cx="60" cy="60" r="46"/></svg><strong>92<small>%</small></strong></span><span class="tbx-1128__copy"><small>CLIENT SATISFACTION</small><strong>ご利用満足度</strong><span>集計結果を見る ↗</span></span></a>CSS
.tbx-1128{display:flex;align-items:center;gap:12px;width:min(283px,100%);height:153px;padding:17px;background:#293f50;border-radius:12px;color:#e7f1ef;text-decoration:none;font-family:system-ui,sans-serif;overflow:hidden}.tbx-1128__chart{width:118px;height:118px;flex:none;position:relative;display:grid;place-items:center}.tbx-1128__chart svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke-width:9}.tbx-1128__track{stroke:#52717e}.tbx-1128__fill{stroke:#edbf85;stroke-dasharray:289;stroke-dashoffset:289;stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.15,.65,.2,1)}.tbx-1128__chart strong{font-size:34px;font-weight:850;letter-spacing:-.08em;line-height:1}.tbx-1128__chart strong small{font-size:15px;letter-spacing:0;color:#edbf85}.tbx-1128__copy{display:flex;flex-direction:column;gap:9px;min-width:0}.tbx-1128__copy small{font-size:8px;letter-spacing:.09em;color:#b7cacb;font-weight:800}.tbx-1128__copy strong{font-size:15px;white-space:nowrap}.tbx-1128__copy span{font-size:10px;color:#edbf85}.tbx-1128:is(:hover,:focus-visible) .tbx-1128__fill{stroke-dashoffset:23}.tbx-1128:focus-visible{outline:3px solid #edbf85;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1128__fill{transition:none!important}.tbx-1128__fill{stroke-dashoffset:23}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Statistics / Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報は通常時から見える状態にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。