.oik-border{--size:148px;--progress:12;--half-size:calc(var(--size) / 2);--stroke-width:4px;--radius:calc((var(--size) - var(--stroke-width)) / 2);--circumference:calc(var(--radius) * pi * 2);--dash:calc((var(--progress) * var(--circumference)) / 100);position:absolute}.oik-border circle{cx:var(--half-size);cy:var(--half-size);r:var(--radius);stroke-width:var(--stroke-width);fill:none}.oik-border polygon{fill:var(--spn-prc)}.oik-border circle{transform:rotate(-112deg);transform-origin:var(--half-size) var(--half-size);stroke-dasharray:var(--dash) calc(var(--circumference) - var(--dash));stroke:var(--spn-prc)}