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

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 create five activity animations using SwiftUI 2.0 in Xcode 12.

Let’s get started 👍

Before we start we are going to be continuing for the last tutorial. We are going to be working from the same Xcode project we started so let’s go ahead and open that up. As you can see we have created an awesome timer animation, an animation using .onAppear to toggle where the shape is going to move to on the View. If you haven’t seen them tutorials yet I will be putting and Link to Part 1 and Part 2 at the end.

Before we get into this animation we are going to edit the padding on the second animation. We are going to bring it up more from the bottom.

Now we are going to move the .onAppear to the outside of the section and place it on the VStack.

We are going to be creating Capsules for this animation. Let’s start by creating a new Section and adding in a HStack.

We have added an alignment and a spacing to the HStack, we have also used the shouldAnimate var we created the first tutorial. We are going to be animating the shapes in a spring sequence. Now we have done that it’s time to create the shapes. We are going to have seven capsule shape to create this animation. They are going to be two different sizes.

Now we are going to give all the shapes a frame.

Now we are going to add some animation.

This is what we are working with so far! This is looking really good.

We need to move this animation up from the bottom of the View. We are going to add some padding.

Conclusion 👏

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

Here is the link to Part 1

Here is the link to Part 2

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

Thanks you for reading this content.