Hello, in this bootstrap four video, we're going to show you progress bars. bootstrap provides an easy way of doing progress bar. So if you are loading something, instead of having to do a bunch of JavaScript and jQuery and CSS to get it, working bootstrap provides you an easy means to get a progress bar element has some basic styling, it allows you to provide a map value, and the current value which you can obviously change via something like JavaScript. So to do this, it's really simple. It is to progress. And the progress bar has a class of progress.

And it has a value and the value is its current value. So I'm gonna put zero for now. I'm for a max of 100. You could have higher so you have more incremental if you have less that you have Left increment, that's totally up to you. And in here, I'm gonna put zero percent. And that's it.

But what I'm also gonna do is copy and paste this a few times. Yeah, I'm just incremented slightly like by 25, just so you can see the difference Chinese 250 5075 75. And finally, the value is now 100%. So if we save that, refresh the browser, and there you can see the different progress bars at the different states. So it's that simple. So if we were to go back here and just change this to an arbitrary number, something like eight at 9am we'll update this as well.

So flex the same If we go back, refresh, there we go. It is now at 89%. That is really, really cool. Just one thing to bear in mind. explorer nine does not support html5 progress element, but you can have a workaround for that. And for that, all you have to do, it's gonna put a comment here.

So if you were to access the source code, you know what this is for, ie, knowing support. And for this, all you have to do you keep it as it is, for inside the progress element, the pre div. And the div has a class of progress as well. That inside here, you have a span And the span has a class of progress dash bar. For this, we do style equals width. This is inline styling, you could do a separate CSS, but for something really this basic, usually recommend don't do inline styling before something is basic.

It's okay. So 25 and semi colon inside the upper 25%, or whatever it is. Yeah, I want to change it to 89. change this to 89. I gotta get rid of this here, save that refresh, and it looks exactly the same. And that's because it is essentially from the user perspective. So you can use it on a non interactive or non resume.

You don't need to do checks if it's on You know if it's Chrome or Firefox or anything like that, so probably is recommend doing this one. But before I show you all the different types, you can also do contextual progress bars which have styling. And if you've done any sort of styling within bootstrap, aka, select success info warning danger, you'll feel right at home. We'll show you all of them. So what I'm going to do is copy four of these simply because there are four different contextual types. And we need to do where it says progress you need to add a number class and this is progress success.

For this to another class of progress dash info. We're gonna do progress. Warning And then finally, we're going to do progress. danger. So if we save that refresh, we now have contextual progress bars. And finally, we're going to show you striped progress bars, which basically use a gradient to create a cool striped effect.

So what we'll we'll actually just copy and paste this, so you can see all the different types. And for this, what you need to do is do progress. That's right, not dot dash. I'm just gonna copy and paste this because a save a heck of a lot of time. And I'm also going to copy and paste this like so. And this one won't have the progress dash success or this update default styling.

So if we refresh that now, there you go. We are Have the first four is regular progress bars. The fifth one is Internet Explorer nine progress bar which also work on the browsers that we have contextual progress bars. And then we have a regular stripe progress bar and we have contextual stripe progress bars. So that's everything you need to know about progress bars in bootstrap four. If you have any questions, feel free to post them on our education platform, sonar learning dot code at UK forward slash question dot php.

There'll be a link in the description. Plus they'll be another link in the description the source code from this video, please rate, comment and subscribe as it really does help us plus it also lets us know what you like about the video we don't like about the video so we can improve it for the future. And as usual, thanks for watching, and I hope you have a great day.