I started to think which loader to choose. I thought: “there is no way I will use Activity Indicator”.
No fucking way… This circle is making me sick. Blah.
I started to think what can be easily achieved. I came up with the following solution.
Let’s use app icon and rotate it!
The app icon had a plain colour background with a small circle logo on it. I asked our designer to send me the logo with an alpha background. He did it & I started to work.
I created CustomLoader which inherits from Image. I knew that I have to have IsRunning property, so I added one. The logic behind it was very simple:
I also knew that the logic above should be put in OnPropertyChanged method. And that was all I knew. So I started to develop.
While I was implementing it, I noticed that we should also set RotationLenght & Easing, so I added two more bindable properties 🙂
Let’s discuss it for a second.
As said earlier we have 3 bindables. What is the most interesting is IsRunning which is responsible for rotating our image. Then we have RotationLenght & Easing – these two allow us to adjust the animation.
Then there is OnPropertyChanged method. If IsRunning is changed we are either starting or stopping animation. The cancellation is done by cancellationToken.Token. Additionally, I’ve added FadeIn/FadeOut methods so the image (dis)appears smoother.
At the end, we have a RotateElement method which simply rotates the element. Voilà! If you want to check the code, there is a link to Github repo at the end of this post. In the repo, there is a sample of usage.
Let’s see the results.
I don’t know how long it took me to implement it. For sure less than creating a Lottie animation in AE. Being honest, I’m kinda happy with the result. What’s more important: the client was happy too. That’s what I like!
This article is neither something new nor rocket science. You’ve seen it by yourself that it’s a really simple code. As I was googling I didn’t find a similar blog post, so here it is. Hope you like it.
The code is on my Github repository in here. Feel free to use it.