CSS LinearGradient stop offset attribute - css

Question

I want to receive Linear Gradient output.
But I cannot understand stop-offset attribute too accurately, to use it.
My code and live-showing output below:
<div id="progress">
<svg viewBox="0 0 100 100">
<linearGradient id="progress" x1="0%" y1="0%" x2="0%" y2="100%" gradientTransform="rotate(35)">
<stop offset="30%" stop-color="#e31cf0" />
<stop offset="70%" stop-color="#4a96ef" />
</linearGradient>
<circle cx="50" cy="50" r="45" class="mask" />
<circle cx="50" cy="50" r="45" class="speed zero" />
</svg>
</div>

Answer 1

I was guessing that this is a kind of meter that shows the progress of something. I changed the circle into a path and animate it using the stroke-dash attribute. I changed the linear gradient into a radial gradient because it matches the circle better.
var offset = 283;
var int = setInterval(function(){
offset -= 5;
if(offset < 40) clearInterval(int);
document.querySelector('path').style.strokeDashoffset = offset;
}, 500)
<div id="progress">
<svg viewBox="0 0 100 100" width="300" height="300">
<radialGradient id="rg1" cx="20%" cy="0%" r="100%" fx="70%" fy="20%">
<stop offset="30%" stop-color="#e31cf0"/>
<stop offset="100%" stop-color="#4a96ef"/>
</radialGradient>
<rect x="0" y="0" width="100" height="100" fill="black" />
<g transform="translate(50 50)">
<path transform="rotate(180)" d="M 45,0 A 45,45 0 0 1 0,45 45,45 0 0 1 -45,0 45,45 0 0 1 0,-45 45,45 0 0 1 45,0 Z" stroke="url(#rg1)" stroke-width="5" stroke-dasharray="283" stroke-dashoffset="280"/>
</g>
</svg>
</div>