.base-timer { position: relative; width: 200px; height: 200px; } .base-timer__svg { transform: scaleX(-1); } .base-timer__circle { fill: none; stroke: none; } .base-timer__path-elapsed { stroke-width: 7px; stroke: var(--framework-color-dtvzep); } .base-timer__path-remaining { stroke-width: 7px; stroke-linecap: round; transform: rotate(90deg); transform-origin: center; transition: 1s linear all; fill-rule: nonzero; stroke: currentColor; } .base-timer__path-remaining.info { color: var(--framework-color-isnxbn); } .base-timer__label { position: absolute; width: 200px; height: 200px; top: 0; display: flex; align-items: center; justify-content: center; font-size: 48px; }