Name: スピナー。CSSチュートリアル (30日目のCSS3の21日目) (Spinners: CSS Tutorial (Day 21 of CSS3 in 30 Days))
Uploaded: 2021-01-14T10:29:06.000Z
Duration: 17 min 49 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

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.

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.

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.

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

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.

If the border raises border radius to 64 pixels on.

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.

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.

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.

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 inheriting the text color from the body.

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

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.

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

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

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

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 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?

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

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.

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

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.

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

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

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

字幕リスト動画再生

スピナー。CSSチュートリアル (30日目のCSS3の21日目) (Spinners: CSS Tutorial (Day 21 of CSS3 in 30 Days))

weird

stick

content

grab