Animated Loading Spinner

Ali Fakih
7 min readMay 13, 2022

How to make a customized Spinner with stroke, hue, and rotation animation in 2 simple ways.

While working on a project, you will have to deal with customized UI components. sometimes, the customization is a bit complicated and it will add complexity to your project. In my case, I had to create a customized button with specific padding for the title, and a loading indicator when the state is loading.

So I had to start from somewhere, and I decided to create my loading indicator like what we are going to see later in this article

For this project, I have created two types of loading indicators, I named them HueSpinnerView & SpinnerView. For SpinnerView we’re going to use CABasicAnimation to achieve the circular animation. While in HueSpinnerView we will be using CAKeyframeAnimation to have a circular animation with custom timing & animated stroke hue.

Code Time

Let us begin with creating a simple class of UIView for SpinnerView

we make sure that, in the layoutSubviews , layer will be rounded by setting its…

--

--

Ali Fakih
Ali Fakih

Written by Ali Fakih

I'm a software dev & tech enthusiast who loves iOS, Swift, networking & electronics. Follow me for insightful articles on software & tech.