There are many ways to implement it. What I would suggest is to break it down into two separate things:
UIButton with a Stop icon. (The button would actually be larger than the icon, though.)
An animated background image of the circle and the streak moving around it. The rest of this post is about how to show that image.
The easiest solution would be to render the spinner into a series of PNGs, then use
UIImage.animatedImageNamed(_:duration:) to load those images as a single UIImage, and finally set the background image of the button to that animated image. But that’s sort of cheating, isn’t it?
A bit tougher would be to use a static image of the spinner and rotate it. I think you’d need a separate image view, because I don’t believe you can access the background image view of a UIButton. Once you had it, you could attach an animation to either the view or its layer causing it to spin (by animating its
transform property). This beats repeated custom drawing because the animation will happen in the GPU.
Finally, if you wanted to burn the device’s battery by doing totally custom drawing, you could subclass
UIView, override its
draw(_:) method to draw whatever you wanted, and use
CADisplayLink as a timer to tell you when the next frame is needed. Again, this would be a pretty wasteful way to do it, but it would work.
Hope this helps!