School of Gains · Presented by PaperGains

Progress ring & bar

Ring capsule (conic gradient, set --p from 0 to 100), thin 4px bars, and the big "0 / 7" stat card.

ring

0 of 7lessons done 3 of 7lessons done

View HTML

<span class="sog-ring-cap"><span class="sog-ring" style="--p:0"></span><span><b>0 of 7</b><small>lessons done</small></span></span>
<span class="sog-ring-cap"><span class="sog-ring" style="--p:43"></span><span><b>3 of 7</b><small>lessons done</small></span></span>

bar + stat card

Lessons complete

0 / 7

View HTML

<div class="sog-card" style="max-width:220px"><small class="sog-subtle" style="font-size:11px">Lessons complete</small><div class="sog-big-stat">0 <small>/ 7</small></div><div class="sog-bar"><i style="width:0%"></i></div></div>
<div style="max-width:300px;margin-top:16px;display:grid;gap:8px"><div class="sog-bar"><i style="width:35%"></i></div><div class="sog-bar"><i style="width:80%"></i></div></div>