Hello, in this video, I am going to show you how to implement a progress bar, which is known as a
progress component in bootstrap social progress component is one of these things.
And a bunch of different things that you can do.
You can put mortarboard, you conscribed, you know, you can animate him like.
So I'm going to show you a basic implementation of one and then you can change it as you need to.
And I'll provide a link to this in the description.
So this doesn't automatically, you know, just move along.
That's something you will need to implement by JavaScript, and that's something I want you to do as
an extra task.
OK, so to implement one really, really simple, we put a div class of Gref and then we pull a narrative
and this every class of
ball we have a roll which is progress bar.
And then we Doyel and the style is basically how much of the ball we want to be filled with 50 percent.
So 50 percent of it will be filled an area dash now.
So the current value, which is about just 50, assuming we are doing two hundred.
The reason we need the value is what we need to implement is maybe we are implementing a website where
the user click the button and maybe tell these what is the current progress to do that you need the
value and that's where he gets it from.
And next, we need to specify
area min.
So what's the smallest value that we can take?
Keep it simple.
Zero.
Next is the area that value Max equals one hundred or so range between zero to one hundred.
If you want more precision, you could do zero to five, zero to ten thousand.
If you want to be able to go into negatives, whatever reason, depending on what you are essentially
displaying, if you go negative 100 or 200 or negative 50 or negative 17 to 10, whatever you want,
but zero 200 is a good range, just percent there.
That 50 percent is just basically what it is that we are going to do.
If that's a new long care break line, I should say.
And that way you can see a bit better.
So you can see responsive and 50 percent across.
So if I change this to, say, some five percent on only the text changes, we need to change this and
this because obviously values are important as well that we are never seventy five percent of the way
along regardless of the screen size.
So, yeah, what we need to do as an extra task is implement a button.
And when you click the button, it essentially, lets say, just adds one to the progress so far.
I click to go to them six, click again, go to seven.
So you know what you need to do.
You won't need JavaScript in your JavaScript.
You will need obviously we need some button as well.
You need to detect when the button has been clicked.
Then within that event you will need to get hold of this.
I recommend attaching some I.D. to it so you can easily get hold of the specific progress bar and then
you will need to use JavaScript to manipulate the style attribute or, you know, the more specifically
the width and the value now and also the text inside the content.
And so that's why you need to do as an extra task.
If you have any questions, feel free to put me on message.
And as usual, I look forward to seeing you in the next awesome bootstrap video.