Name: CSSプログレスバーチュートリアル (CSS Progress Bar Tutorial)
Uploaded: 2021-01-14T10:23:06.000Z
Duration: 11 min 10 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

未来形

in today's view, we're gonna take a look at a bunch of really cool CSS tricks that'll allow us to create this progress bar right here.

to 不定詞

So make sure you watch the entire video so you gotta learn all the different tricks to get started.

現在進行形

I just have a simple HTML file that is linking both of our style sheets and our job script file that we're going to be needing in order to create this progress bar.

Also, I have this application open up on the right here so that we can see our progress as we go to get started.

We need to write the very simple HTML that we're going to be using to create the progress by what we really need for this is the credit tive.

We just want to give it the class with Progress bar here and then since we wanted to say loading inside of it, we're going to use a data, a tribute which essentially allows us to create any custom attribute that we want honor HTML element here.

We're gonna call it label since it's going to be the label of our progress bar will put loading inside of here since this is what we want to have inside of our actual loading bar, and then we can close that dip, and that's all we need to do for HTML.

So what's actually jumped into our style sheet and start styling this to get started here?

I just want to make it so that we're going to be using the box sizing of border box for all of our different elements, which will make styling are different size ings a lot easier so we could just change our box sizing here, change into border box and every Gail and also I want to select the body and remove all padding and margin from it so we could just have padding to zero and the margin to zero.

And this is just making working with our CSS a lot easier.

Then next week in Slick, that progress bar class that we created and added into our CSS and in here.

What we want to do is we want to give it a whip and a height, so we'll just, for example, say a width of 500 pixels on.

We're going to give it a height of three e m and The reason we're using am instead of pixels is because we want the height of our progress bar to scale with the size of the text that's inside of it.

Otherwise, if we used pixels here and put very large text inside of it, the text would overflow the progress bar.

And if we had a really small text, the textbook really small in comparison the size the Progress bar.

But if we scale our height using E EMS, it'll scale with the size of the phone inside of a progress bar.

So now all we want to do is at a background color to it so that we can actually see what we're working with.

And we're at a really dark gray color in here.

And if we say that, we'll see that we get a nice black rectangle showing up next.

We want around the corners of our rectangle just a little bit.

So in here, what is going to set a border radius of 1.5 PM, which is just half of the height, so that weight around our corners perfectly to touch each other on the end.

And as you can see, we get nice perfect rounded corners on our progress bar.

Lastly, we just want to change the text code inside of our Progress bar to be wait so that our text will show up on top of the different black color because black text on black background is impossible to see and then next, since we have no more elements inside of our HTML we want to use is a pseudo element.

So we're going to use the before pseudo moment so you can access that by selecting your class.

You want to add the suit element to adding to Coleman's and then typing before, and this is going to essentially add a new element to our document that is going to be right before this progress bar.

Essentially, it's inside the Progress bar right at the very beginning of it.

Now, to make this pseudo element actually show up, we need to give it what's called content, and normally you would just give it a point content if you want to style it in some form of way of just being a background element.

But in our case, we want to give it the content.

Inside of this data label attributes that we added to our HTML.

So in order to do this, we just need to use the A t t r method inside a CSS.

We wanna pass it and the attributes that we want to use, which is the data label and the content of this pseudo element is going to be based on this label.

Now, using this attribute Property here a t t.

Can on Lee really be used with the content, Property and CSS.

So it's got limited use cases, but it's really powerful when doing something like this.

And now if we save this, you see that are loading text is being added into our HT mill, even though it's not actually inner ht mo as an element, it's being added by R.

So now let's actually style the inner person of our progress bar and as position everything correctly.

So first thing we want to do is use deflate, display flex, and we want to align the items in the center.

So that way are loading screen Texas going to be in the center when we position the sizing of this and then next.

What we want to do is we want to position this absolutely inside of our previous progress bar element.

So to do that, we need to add position relative to this so that it would be absolutely positioned inside of a progress bar.

Now what we want to do is we want to have at it so that it's slightly insect from our other partners.

We wanted to be the same thing from the top 0.5 e m same thing for the bottom of 0.5 PM But now if you say that you see that are loading is now being positioned perfectly in the center because it's taking up full height minus 0.5 a.

What we want to do is we want to just give it a with for now, we'll just say it's going to be 10% that we have something to work with.

And we also want to set a min with We're gonna set this year to be to our Ian.

So essentially, this just means that our progress bark will never be exactly zero.

That way our users always have something to look at.

Even if the progress is at zero, it'll just show a very small progress bar instead of showed nothing.

And next we want to set a max with because we never want our progress park to go above 100%.

M on the left, and we also want to offset it by 0.5 PM on the right we need to do is we need to do a calculation.

So we want to take 100% minus one e m here.

So now if we save that, our maximum with that we can have is going to be 100% minus 1000.5 a m on the left and 0.5 p.

So that way our Progress bar never actually overflows the space that we give it.

I was going to give it a nice dark blue background.

069 And if we say that you see that we got a nice little blue color inside of here, and all we need to do is apply a border radius to it.

So we'll pry a border radius in here and where he's going to give it one.

He m for example, As you see, we get a nice little pill shaped border around it, and then so are loading.

Text isn't pushed right up all way against the left side.

We're just going to add a little bit of padding inside of her element here of one, he end.

Now, if you say that you see are loading Texas being pushed a little bit to the side.

So now if we actually take are with you and said it's 0% and save you see that we get just a small portion of our progress bar being shown because of this men with that we have set up.

And if, for example, we set it to something very large, like 2000% and save it, you see that it just completely fills our progress part and doesn't actually overflow it, which is exactly what we want.

Now, this is all great, but we have no way to actually set this with property inside of our HTML currently on.

We also have no way to modify this with property inside of Java script because usually you want to make a progress bar grow or shrink, depending on progress.

So what should the CS has variable to define the with inside of our progress bar.

So instead of progress are we got our before element here and we're gonna take this with you and we're going to use a calculation, and what we're going to do is access a variable, which is going to be a CSS variable called with, and we're going to defaulted to zero if it doesn't actually exist.

And then we're going to take this with because this with is just going to be a number like one, 23 10 It's not actually a percent, so we need to convert that to a percentage, so just multiply it by 1% which will essentially convert whatever number we pass it into a percentage so 10 the number 10 will be converted to 10%.

The number one will be converted to 1% and so on.

And if you say that you can see it just defaults to zero.

But if we go into her HTML here and we use the style attribute and we want a style the with to be, for example, 20 and we'll save it, you not see that our progress part is 20%.

We could change into 50 and it's going to be 50% and so on, and that's a really powerful This allows us to set a default with for our progress bar as soon as the page loads, for example, we could just said it to 10% here for when I page floats.

But what would happen if we want to actually modify this Progress bar inside of job a scrip, for example, to stimulate loading a page because we're using sex as variables, It's going to be really easy to do that.

So inside of our drama script here, let's access our progress part.

We're goingto use document that get element by class name here, passed in her class name of Progress Bar and since there's only one, we just want to get the 1st 1 who just get the first element of that already and then to simulate loading.

We're going to use set interval which essentially just call a function inside of it at a certain interval.

So we passed the function that we want to call and then after that, we're going to pass it.

How often we wanted to be called and this is in milliseconds.

So let's just say every five milliseconds we want to call the code inside of this set interval and the first thing we want to do inside of this set interval is we want to get the current with of our Progress bar and then we want increment the width of that progress bar by the amount of percentage that we have loaded.

So to actually get the current, we need to get the computer style of our progress bar so we could just get computer style of our progress bar here and then to get the width from that, all we need to do is take that we need to use parts float since we're going to be getting a string and we want to convert it to a number, and we're just going to say computed style.

We want to get the property value for that with property.

So we passing that with property and then if that doesn't exist, for example, as soon as the page loads, if we don't actually supply it with, this will be not a number.

So if it doesn't exist, we just wanna defaulted to zero.

And then all we need to do is take our Progress bar, take this style portion of it.

We just want to set a property here so we could just sit a property over that with, and we could just set it to that with variable that we just created.

And of course, we want to just add 0.1, for example, so that it would constantly increase the progress every five milliseconds.

Now, if we save that as you can see, our progress bar slowly fills up, and as soon as he gets to the top, you see, even though this number is constantly increasing, it won't actually overflow our progress bar, and it'll just stay at that 100%.

And that's all it takes to create a progress bar using CSS and HTML and how to interact with that progress bar through Java script.