I also didn’t like how the ring would jump when moving between the indeterminate and progress modes, I wanted it to smoothly transition between the two.
Here I’ll walk through how I rolled my own in a couple of hundred lines.
- indeterminate ‘spinner’ mode.
- progress mode where the circle arc represents a percentage, with an optional label showing the percentage as text.
- smooth arc transition between indeterminate and progress modes.
- visual ‘pulse’ when in progress mode, in case progress is very slow.
CALayerholds the visual state of the layer, as produced after any animation transformations have been applied.
This way we can capture the rendered
StrokeEnd, and use it to initialize the
Fromvalue of the next animation.
We do that with the following:
As you switch the control between Indeterminate true/false, it will transition smoothly between the visual representations of the two.
Grab the code from Github, and have a play!