.progress-container{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}.progress-circle{width:100%;height:100%;border-radius:50%;position:relative;background:conic-gradient(from 0deg,white var(--progress),transparent 0);mask:radial-gradient(circle,transparent 40%,black 42%);-webkit-mask:radial-gradient(circle,transparent 40%,black 42%)}.progress-circle:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:linear-gradient(90deg,#fff,#a4d6ff);mask:conic-gradient(from 0deg,black var(--progress),transparent 0);-webkit-mask:conic-gradient(from 0deg,black var(--progress),transparent 0)}.progress-text{position:absolute;font-size:20px;font-weight:700;color:#fff}