@property --progress{syntax:"<number>";inherits:false;initial-value:0}@keyframes progress-animation{0%{--progress:0}to{--progress:100}}.circular-progress{--size:40px;--half-size:calc(var(--size) / 2);--stroke-width:1px;--radius:calc((var(--size) - var(--stroke-width)) / 2);--circumference:calc(var(--radius) * pi * 2);--dash:calc((var(--progress) * var(--circumference)) / 100);opacity:0}.on .circular-progress{opacity:1;animation:progress-animation 4.5s linear 0s 1 forwards}.paused .circular-progress{animation-play-state:paused}.circular-progress circle{cx:var(--half-size);cy:var(--half-size);r:var(--radius);stroke-width:var(--stroke-width);fill:none;stroke-linecap:round;width:40px;height:40px}.circular-progress circle.bg{stroke:transparent}.circular-progress circle.fg{transform:rotate(-90deg);transform-origin:var(--half-size) var(--half-size);stroke-dasharray:var(--dash) calc(var(--circumference) - var(--dash));transition:stroke-dasharray .3s linear 0s;stroke:#fff}