.quksc-ring{ width:110px; height:110px; position:relative; display:inline-block; } .quksc-ring svg{ transform:rotate(-90deg); width:110px; height:110px; } .quksc-ring .bg{ stroke:#e9ecef; stroke-width:10; fill:none; } .quksc-ring .fg{ stroke: var(--quksc-box); stroke-width:10; fill:none; stroke-linecap:round; transition: stroke-dashoffset .4s linear; } .quksc-ring .center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color: var(--quksc-box); font: 700 22px/1 ui-monospace,Menlo,Consolas,monospace; } .quksc-ring .lbl{ position:absolute; left:0; right:0; bottom:-18px; font-size:12px; color:#666; text-align:center; } .quksc-timer{ gap:26px; } .quksc-intro{ margin-bottom:14px; }