Everybody?

Welcome back to see a suspect in 30 days.

Today's day number 21 we're gonna be coding up some animated CSS only spinners.

Let's check it out.

Animated Spinner's right here.

Day number 21.

We're gonna be making these right here.

Spinners.

What would you use a spinner for when you're loading contents when you're loading a page?

You know when you're loading an application and image, that's where you'd use a spinner.

You see it quite often in websites, applications, software.

Ah, it's simply you're watching videos.

Even the spinner just indicates that something is happening.

Something is loading and it's ah, they're kind of fascinating to look at and these air only made in or these air made in CSS three only.

So let's jump in and get started here in a code editor.

We're going to go ahead and download day number 21 spinners give you a second to do that.

In fact, you could just pause the video, go ahead and do that, and I'm just gonna show you a couple things.

So here's the index file.

Hte e mails.

Very simple.

It's simply a div with the class of Spinner one and a different class of spin or two.

That's it.

Let's jump into our sandbox and get coding Our CSS.

First thing we're gonna do is we're gonna select spinner Dash one.

We're going to give it a position of relative display of in line, block, vertical line of middle and that we're gonna give it a width 64 pixels and height, 64 pixels and a border radius of 64 pixels.

Good, I'll say 100%.

That should do the trick.

But 64 pixels means that is going to be.

If the border raises border radius to 64 pixels on.

It's the same as with the night.

Then it's gonna be perfect circle.

All right, receive that.

You probably shouldn't actually see anything at this point.

You just see an empty space that's 64 by 64 Beauty.

Now we're gonna do is we're gonna say spinner, dash one and the before pseudo element position.

Absolute.

We got to give it a content of an empty string, of course, and which whoops, with of 64 pixels, height of 64 pixels and a border radius again 64 pixels We're going to give it a color of 3 to 3 and this is the text color.

323 B 40.

But here's the thing.

There's really no text, but we're gonna be using an interesting CSS value called current color.

It's kind of like a CSS variable, so watch this fiber to go box shadow insect negative five pixels, 00 and then five pixels and then current color.

That's gonna grab the actual color.

So it's kind of like you set a variable, so I'm gonna save that.

Check it out in the browser, you can see the current color.

Is that gray because it's grabbing current color?

If I were to remove this, not really sure what would happen, it looks like it would be.

It's grabbing the text color.

It's inheriting the text color from the body.

But if I were to change this to read, the current color should be red.

So that's how that works right there.

Pretty fun.

Little CSS trick there, and now we're gonna do is run a clip this shape, this unusual shape we just made to a rectangle.

Ah, but we're going to actually define the values here 0 64 pixels comma, 32 pixels, comma zero That will give us this shape here again.

Kind of weird.

But hang with me.

It's kind of like a like a like an eight bit hockey stick hanging upside down.

Um, but watch this.

We're gonna actually say Border Radius.

Oh, here's the problem.

Oh, there we go.

Border Radius.

I thought I already added that, but I didn't do properly.

Border 80 64.

So this hockey stick shape is actually gonna now get this shape here.

That looks a lot nicer.

So you could see what the border idiots did to change that.

So this board that's shaped there without the border radius actually kind of looks like it's very unusual.

The right side of it is thicker.

The top side of it is a bit thinner and long, but the border radius really gives it a nice feel.

And you could almost see now how that's gonna turn in.

You know how that's gonna look when we spin it?

So now we're gonna do, say, animation.

We're gonna give the animation name of rotator one second infinitely linear.

In fact, I want to ease it.

I think that might be.

Let's see what that looks like.

And now we need to create a key frame.

So key frames it's called Rotator Rosie Tour at 0% were going to say transform.

We're gonna rotate it 180 degrees and, let's say 50% we're gonna go rotate to transform whips, transform, rotates back to zero degrees and then 100% we're going to do back to 180 degrees.

Let's see what that does.

Interesting.

Very interesting.

Okay, this the 1st 1 actually needs to be negative 180 degrees, but I'm gonna try something here.

Okay, So do you see?

Because I haven't, ese, It's actually doing this like, jump, jump, jump, jump.

If I make it linear, we'll see if it should just be spinning.

Exactly.

But now I'm wondering if I just started at zero.

Let's just try something started zero.

And I just say, 100% we spent at 360 it should still do the same thing.

Yeah, and now I can do ese, I like that.

It's kind of needs.

So let's try that.

Okay, But now what I want to do is.

I wanted to also animate the box shadow.

And we're going to say insets Negative.

Five pixels, 005 pixels.

Current color.

That's in fact, the same box shadows right now.

But we need to set it to this because what I want to do is now make a very, very it make a variation of it.

So box shadow at Okay, this is where I might need Let's try this negative one and then one.

Let's see what that looks like.

Very weird.

So here's where I'm gonna actually throw that 50% back in there, and I'm gonna transform the whole thing.

I'm gonna say 180 degrees here starts at 0 to 180 degrees and then 360 and I'm gonna do this box shadow at 50%.

I'm gonna do this, and then at 100% I'm gonna go back to this.

That should give me an interesting effect.

Okay, It does do something.

It's kind of like a we're doing some weird stuff.

Your folks we're gonna change us back to linear, and that should probably meet.

There we go.

So there we go.

So you see how as it goes around, it gets thinner and then thicker, thinner and thicker.

It's kind of neat.

Looks like a tadpole in a way.

Now, I don't like how it's thin on the side.

I don't want to get thin at the top.

So that's where I'm gonna go back here to 0%.

I'm gonna say negative 180 degrees to start at that is going to go spend 20 degrees at the top, which will make it thin at the top.

And then I'm gonna bring it to 180 degrees.

Here, that is gonna change where it gets smaller at the top.

Yep.

I like that.

That looks good.

There's our first rotator.

Now let's go down to the next spinner.

So I'm gonna leave the key frames at the bottom.

Good practice to do that.

So your quotas organized.

The next spinner is gonna be called.

It is called spinner.

Dash too.

Position.

Relative Margin 32 all around and display in line block, Vertical align, middle.

Same.

Stiles is the top.

Excuse me.

The top one.

Uh, those 1st 4 lines.

16 pixels with 16 pixels height and then we're going to board a radius.

This is where I had the problem last time.

I just wrote Borders and aboard a radius.

16 pixels Background color.

323 B for zero.

Cool.

And now we're gonna see that and see if it does anything.

Okay.

I call on silly brat.

I said spinner one.

You probably caught that spin or two.

There we go.

So we have a dot We have a nice circle.

Let's continue now.

I'm gonna say spinner dash to before.

Pseudo element and spinner dash to after pseudo element position.

Absolute display in line block, vertical align, middle height, 16 pixels with 16 pixels.

Border radius, 16 pixels, background color, inherit content.

Of course, we need the content.

I'm gonna put that at the top.

I like it having right after position.

Here we go.

And that's going to you're not gonna see anything.

It's just creating the sizes of the elements.

I don't think you're actually going to see it.

In fact, no, we don't see anything yet, and we don't see anything yet because the position is absolute and we haven't given it any left or right.

We haven't transformed it or moved it along the X axes at all.

So it's actually just hiding behind this circle.

So they are.

They're just hiding.

So that's where we're actually going to start animating.

So now I'm gonna say spinner dash to before I'm gonna enemy that before circle and I'm gonna say to ran's form and we're gonna go translate X, and that's going to bring 120% that way.

So negative, 120%.

And so let's save that.

Cool.

Okay, so now what we're gonna do is we're gonna say transform origin.

So this lets you modify the origin for transformation so you can transform.

You can move where the origin of the element is.

So meaning like, are you transforming from the center The top left a top right or any anywhere around the element itself.

You could see bottom center left top right.

You can actually use numeric values as well.

So let's go 32 pixels and so that's X.

And then why?

Which is gonna be important once we start our animation.

So we're gonna call the first animation orbit Dash 1/1 2nd Let's do it infinite and linear to keep it safe.

And now we need to create that animation key frame, do it down here, the bottom key frames.

And let's call it what we said we would orbit.

10% were going to say transform, translate X, we're gonna go.

We're gonna start a negative 120% and we're gonna rotate it 180 degrees.

So at 0% that's its first step in the timeline.

Then at let's do 30% of the way through, let's change the rotate to zero degrees and leave the translate at their, uh, negative 1 20 We're going to 70%.

The translate will remain the same, and the rotate will stay at zero.

In fact, we're gonna leave it there for for that portion as well.

And then one more Here, translate X.

We're gonna go to negative 180 degrees.

Let's see what we just created.

Okay.

Interesting.

Not quite where we're trying to get.

As you could see here, this is kind of more what we're We're gonna get to you.

So we got our orbit.

One infinite linear.

What did we do?

30 70 0 that's a problem.

100%.

We're gonna bring you back around.

So now let's save that.

There we go.

So it swings around and it goes, as you could see, to see how it swings wide out here.

The reason why it does that is because this is where you can see this coming into play the transform origin.

If I take this out and save it watches gonna happen back to transform or it doesn't even do anything.

Let's say 10 pixels, 10 pixels just okay.

You see how that's working?

Transferred Needs a transform origin in order to for us, too.

Enemy that transform.

If I just left it at nothing, it's actually it is actually rotating.

Um, but you can't see it rotate because it's just a black circle.

So you know you can actually see that it's working.

So we actually do have to have a transformer origin.

If I did 10 pixels and 10 pixels on the X and Y is going from top and left, it's gonna be rotating around that that point.

So there's actually, uh, timpanist dot net tim panis dot net.