GLSL shader example
Circular Progress Arc with Rounded Caps
An angular threshold keeps part of the ring, while small circles cap the two endpoints without changing stroke width.
Live example
Edit the code and the preview updates as you type.
What to observe
Circular Progress Arc with Rounded Caps.
Mechanism
An angular threshold keeps part of the ring, while small circles cap the two endpoints without changing stroke width.
The controlling code
float progress=.05+.9*u_parameter,a=mod(atan(p.y,p.x)+6.28318,6.28318),end=progress*6.28318;vec2 cap=vec2(cos(end),sin(end))*.5;float d=a<end?abs(length(p)-.5)-.055:min(length(p-vec2(.5,0)),length(p-cap))-.055;c=mix(c,vec3(.2,.85,1.),1.-smoothstep(-aa,aa,d));
Experiment
Set u_parameter to 0.25 and then 0.75, changing progress=.05+.9*u_parameter from 0.275 to 0.725. The moving round endpoint sweeps farther around the ring while its radius stays at 0.5.
Debugging and cost
The ring and endpoint distances all subtract the same .055 stroke radius. Change each stroke-radius .055 to .08 to thicken the arc and both caps together; changing only the ring would leave mismatched ends.