Today we'll see how to create this spinning loading animation,
using Pure CSS.
And, uh, animations like this comes in handy many times,
so we'll quickly see how to make one.
So saying that, let's get into the code.
So we have our basic instrument skeletal structure already.
So I just create a with a class container
which is for the solely purpose to bring it to the center of our screen,
and uh
within this , I'll create one more with the class loading
where we are going to actually do the animation of loading.
So I'll do the CSS in this file only,
so we're doing the style text.
First I'll set margin and padding to zero for all the content,
so I'll do asterisk, and within this I'll set margin and padding to zero.
Next, let's start with a container.
So we want to bring it to the center of our screen
So I'll just do top to 50%, left to 50%,
position to absolute
and uh transform, translate -50%
comma -50%.
So we'll get it in the center of our screen.
Now let's start with the loading.
So I'll create a border of 6 pixel,
solid,
and a light gray color, so I'll give
#ccc.
And next, I'll give a width of 60 pixels
and height of 60 pixels.
So now if you'll save this,
you will get the box on the screen.
As we have a box,
to convert it to a circle,
what we have to do is we have to set the border-radius to 50%.
So now we'll get it in the shape of a circle.
Next, I'll just give a border-top-color
and a border-left-color
to a hex value, which will give it a green color.
[music]
Now, for the animation, we are going to use this animation property.
So first is the animation name,
so I'll give it a spin.
Next is the animation duration,
so I'll give off one second.
And we'll give the animation iteration count to infinite
so that it loops forever.
And the animation timing function to ease-in-out.
So after doing this, we need to set keyframes for the animation.
So we'll use this @keyframes and pass the animation name, which is spin.
So for the 0%,
we will do this transform, rotate: 0 degrees.
And for the 100%, we will change the transform to rotate to 360 degrees.
[music]
So after you save this, you will start seeing the animation.
Now, this is just a basic one,
but you can play around with these things and change some properties
depending on how you want to show the animation for the loading.
You can change the animation duration time,
depending on how fast you want to show the animation.
Now, if you want the same like I showed you in the preview
where there were a couple of rotations between the starting and the ending point.
the changes that you have to make is in the 100% keyframe.
So if you change the rotate to 720 degrees
then it is going to rotate twice before it comes to an end.
So it will look something like this.
Now, if you want to make the rotation three times,
then you have to just multiply it by 3.
So 360 multiplied by 3, it's 1080.
So now it is going to take three rotations before it stops
and then start again.
So if you are doing something like this, just keep one thing in mind:
you have to be in a multiple of 360 degrees
because--let's say if I put any random value like 800...
then you can see that it kind of lags before it starts again for the rotation,
so it doesn't look good.
So if you want to go it smoothly,
then you just want to keep it in the multiples of 3.
And you can change the animation duration
depending on how fast you want to do it.
So this basically ends the tutorial.
And it's quite easy and quite helpful also if you want some loading animation before showing some content.