Up next in 10
CSS Progress Bar Tutorial
519 views
Feb 7, 2024
The "CSS Progress Bar Tutorial" is an instructional video that guides viewers through the process of creating a customizable progress bar using CSS (Cascading Style Sheets). Throughout the tutorial, viewers learn how to design and implement a progress bar with different styles, colors, and animations to suit their specific needs. The video covers essential concepts such as HTML structure, CSS styling, and possibly JavaScript for interactivity. Through clear demonstrations and explanations, viewers are shown how to use CSS properties like width, background-color, and transitions to create visually appealing progress bars for various purposes, such as tracking loading times, form completion, or video playback. Whether you're a beginner exploring front-end development techniques or an experienced developer seeking to enhance your UI design skills, this tutorial offers valuable insights into creating customizable progress bars using CSS.
View Video Transcript
0:00
In today's video, we're going to take a look at a bunch of really cool CSS tricks
0:03
that will allow us to create this progress bar right here, so make sure you watch the entire video
0:07
so you get to learn all the different tricks. To get started, I just have a simple HTML file that is linking both of our style sheets
0:16
and our JavaScript file that we're going to be needing in order to create this progress bar
0:20
Also, I have this application open up on the right here so that we can see our progress as we go
0:25
To get started, we need to write the very simple HTML that we're going to be using to create the progress bar
0:29
bar. All we really need for this is to create a div, and we just want to give it the class
0:34
of progress bar here. And then since we want it to say loading inside of it, we're going to
0:40
use a data attribute, which essentially allows us to create any custom attribute that we want
0:45
on our HTML element here. We're just going to call it label, since it's going to be the label
0:49
of our progress bar. And we'll put loading inside of here, since this is what we want to have
0:53
inside of our actual loading bar. And then we can close that div, and that's all we need to do for
0:59
our HTML, so let's actually jump into our style sheet and start styling this
1:03
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 our
1:10
different sizing a lot easier. So we can just change our box sizing here, change it to border box, and there we go, and
1:18
also I want to select the body and remove all padding and margin from it
1:23
So we can just have the padding to zero and the margin to zero, and this will just make working
1:27
with our CSS a lot easier. Then next we can select that progress bar class that we created and added into our CSS
1:36
And in here what we want to do is we want to give it a width and a height. So we'll just, for example, say a width of 500 pixels, and we're going to give it a height
1:44
of 3EM. And the reason we're using EM instead of pixels is because we want the height of our progress
1:50
bar to scale with the size of the text that's inside of it. Otherwise if we use pixels here and put very large text inside of it, the text would over
1:57
the progress bar, and if we had really small text, the text would look really small in comparison
2:02
to the size of the progress bar, but if we scale our height using EMs, it'll scale with the size
2:07
of the font inside of our progress bar. So now all we want to do is add a background color to it so that we can actually see
2:13
what we're working with, and we'll just add a really dark gray color in here, and if we save
2:17
that, we'll see that we get a nice black rectangle showing up
2:21
Next we want to round the corners of our rectangle just a little bit, so in here we're just going
2:25
set a border radius of 1.5 em, which is just half of the height, so that way it'll round our
2:30
corners perfectly to touch each other on the end. And as you can see, we get nice, perfect
2:34
rounded corners on our progress bar. Lastly, we just want to change the text color inside of our
2:40
progress bar to be white 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 what we want to use is a pseudo element
2:54
So we're going to use the before pseudo element, so you can access that by selecting your class
2:59
you want to add the pseudo element to, adding two columns, and then typing before
3:04
And this is going to essentially add a new element to our document that is going to be right
3:09
before this progress bar. essentially, it's inside the progress bar right at the very beginning of it
3:13
Now, to make the pseudo element actually show up, we need to give it what's called content
3:18
And normally, you would just give it a blank content if you want to style it in some form of way of
3:22
just being a background element. But in our case, we want to give it the content inside of this data label attribute that we
3:28
added to our HTML. So in order to do this, we just need to use the ATTR method inside a CSS
3:35
And we just want to pass it in the attribute that we want to use, which is the data label
3:39
and the content of this pseudo element is going to be based on this label
3:44
Now using this attribute property here, ATTR, can only really be used with the content property in CSS
3:50
So it's got limited use cases, but it's really powerful when doing something like this
3:55
And now if we save this, you see that our loading text is being added into our HTML
4:00
even though it's not actually in our HTML as an element. It's being added by our CSS
4:05
So now let's actually style the inner portion of our progress bar and as position everything correctly
4:12
So the first thing we want to do is use display, display flex, and we want to align the items in the center
4:18
So that way our loading screen text is going to be in the center when we position the sizing of this
4:23
And then next what we want to do is we want to position this absolutely inside of our previous progress bar element
4:30
So to do that, we need to add position relative to this so that it'll be absolutely positioned inside of
4:35
of a progress bar. Now what we want to do is we want to add it so that it's slightly inset from our other progress bar
4:43
So we want it to be 0.5 EM from the left side of our progress bar
4:47
We want it to be the same thing from the top, 0.5 EM
4:52
Same thing for the bottom of 0.5 EM. Now if you say that, you see that our loading is now being positioned perfectly in the center
5:00
because it's taking up the full height minus 0.5 EM on the top and the bottom
5:04
Next, what we want to do is we want to just give it a width for now
5:08
We'll just say it's going to be 10%. That way we have something to work with
5:12
And we also want to set a min width. We're going to set this here to be 2REM
5:17
So essentially this just means that our progress bar will never be exactly zero
5:22
That way our users always have something to look at even if the progress is at zero
5:26
It just show a very small progress bar instead of show nothing And next we want to set a max width because we never want our progress bar to go above 100 But because we offset this by 0 em on the left and we also want to offset it by 0 em on the right
5:43
what we need to do is we need to do a calculation. So we want to take 100% minus 1 em here
5:51
So now if we save that, our maximum width that we can have is going to be 100% minus 0.5 EM on the left and 0.5 EM on the right
5:59
So that way our progress bar never actually overflows the space that we give it
6:04
And now to actually see our progress bar, let's just give it a background color here
6:08
And we're just going to give it a nice dark blue background, 069. And if we save that, you see that we got a nice little blue color inside of here
6:16
And all we need to do is apply a border radius to it. So we'll apply a border radius in here, and we're just going to give it 1E.M, for example
6:25
And as you can see, we get a nice little pill-shaped border around it. And then so our loading text isn't pushed right up all the way against the left side
6:32
we're just going to add a little bit of padding inside of our element here of 1EM
6:36
Now if you say that you see our loading text is being pushed a little bit to the side
6:40
So now if we actually take our width here and set it to 0% and save
6:44
you see that we get just a small portion of our progress bar being shown
6:48
because of this min width that we have set up. And if for example we set it to something very large like 2,000% and save it
6:54
you see that it just completely fills our progress bar and doesn't actually overflow. actually overflow it, which is exactly what we want
7:00
Now this is all great, but we have no way to actually set this width property inside
7:05
of our HTML currently, and we also have no way to modify this width property inside
7:10
of JavaScript because usually you want to make a progress bar grow or shrink depending
7:14
on progress. So let's choose a CSS variable to define the width inside of our progress bar
7:21
So inside our progress bar, we've got our before element here, and we're going to take this
7:25
width and we're going to use a calculation and what we're going to do is access a variable
7:30
which is going to be a CSS variable called width, and we're going to default it to zero if
7:35
it doesn't actually exist. And then we're going to take this width because this width is just going to be a number
7:40
like 1, 2, 3, 10, it's not actually a percent. So we need to convert that to a percentage, so we'll just multiply it by 1%, which will essentially
7:49
convert whatever number we pass it into a percentage. So the number 10 will be converted to 10%, the number 1% and so on
7:59
And if you save that, you can see it just defaults to 0 since we're not actually passing
8:03
in a width, but if we go into our HTML here and we use the style attribute, and we want
8:09
to style the width to be, for example, 20, and we save it, you now see that our progress bar
8:15
is 20 we could change it to 50 and it going to be 50 and so on And that really powerful This allows us to set a default width for our progress bar as soon as the page loads For example we can just set it to 10 here for when our page loads
8:30
But what will happen if we want to actually modify this progress bar inside of JavaScript
8:35
for example, to simulate loading a page. Because we're using CSS variables, it's going to be really easy to do that
8:42
So inside of our JavaScript here, let's access our progress bar. We're just going to create a variable
8:47
Call it progress bar here, and we're just going to use document
8:51
Get element by a class name here, pass in our class name of progress bar
8:57
And since there's only one, we just want to get the first one. We'll just get the first element of that array
9:02
And then to simulate loading, we're going to use set interval, which will essentially
9:05
just call a function inside of it at a certain interval. So we pass the function that we want to call
9:12
And then after that, we're going to pass it how often we want it to be called, and And this is in milliseconds, so let's just say every five milliseconds, we want to call the code
9:20
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
9:25
width of our progress bar, and then we want to increment the width of that progress bar
9:29
by the amount of percentage that we have loaded. So to actually get the current width, we need to get the computed style of our progress bar
9:39
So we can just say get computed style of our progress bar here, and then to get the width from
9:44
that, all we need to do. do is take that. We need to use parse float since we're going to be getting a string and
9:51
we want to convert it to a number. And we're just going to say computed style. We want to
9:57
get the property value for that with property. So we passing that with property. And then if
10:03
that doesn't exist, for example, as soon as the page loads, if we don't actually supply
10:08
it with, this will be not a number. So if it doesn't exist, we just want to default it to
10:12
0. And then all we need to do is take our progress bar, take the style portion of it, and
10:19
we just want to set a property here so we can just set a property of that width, and we can
10:27
just set it to that width variable that we just created. And of course, we want to just add 0.1
10:34
for example, so that it will constantly increase the progress every 5 milliseconds. Now if we save
10:39
that. As you can see, our progress bar slowly fills up, and as soon as it gets to the top
10:43
you see even though this number is constantly increasing, it won't actually overflow
10:47
our progress bar, and it'll just stay at that 100%. And that's all it takes to create a
10:53
progress bar using CSS and HTML, and how to interact with that progress bar through JavaScript
10:59
If you guys enjoyed this video, make sure to check out my other CSS tutorial videos linked over
11:03
here and subscribe to the channel for more content just like this. Thank you very much for
11:07
watching and have a good day
#Programming
#Software