SwiftUI Tutorial – How to create a Loading/Activity Animations in Xcode 12 Part 1

Welcome to a new SwiftUI tutorial. We are going to be creating some simple loading animations over the next few weeks we are going to be creating five activity animations using SwiftUI 2.0 in Xcode 12.

Let’s get started 👌

Today we are going to be creating our first simple animation. Let’s open up Xcode 12

Then call the project LoadingAnimations_SwiftUI or whatever you like. We will be using the same project we create here for the other loading animations!

Now we are set up we are first going to create a State and some var’s for the project.

We are going to create a VStack and add a Spacer. We are going to be using something called Section this is an affordance for creating hierarchical view content.

Awesome, we are now going to create some Circles but first we are going to add a ZStack.

We are going to create three Circles here.

Now we are going to use the .onRecive for our timer, in here we are going to use swap this is going to exchange the values of our two arguments which are leftOffset and rightOffset.

Now we just need some padding to bring this up from the bottom.

Conclusion 👏

Dope, we have now finished this tutorial on how to create a simple activity animation Part 1 using Xcode 12. We have learnt how to use a Section, swap and much more. With this knowledge you should be able to create some awesome animations.

If you would like the whole source code of this tutorial GitHub

I hope you have enjoyed this tutorial! If you want to learn more about SwiftUI and Neumorphism Design, check out my YouTube channel for other dope SwiftUI tutorials. Also make sure to keep yourself up to date with our upcoming tutorials on Instagram

Thank you for reading this content.