1
00:00:01,180 --> 00:00:07,540
Hello, in this video, I am going to show you how to implement a progress bar, which is known as a

2
00:00:07,540 --> 00:00:12,730
progress component in bootstrap social progress component is one of these things.

3
00:00:13,090 --> 00:00:15,490
And a bunch of different things that you can do.

4
00:00:15,500 --> 00:00:19,510
You can put mortarboard, you conscribed, you know, you can animate him like.

5
00:00:19,510 --> 00:00:26,720
So I'm going to show you a basic implementation of one and then you can change it as you need to.

6
00:00:26,740 --> 00:00:28,770
And I'll provide a link to this in the description.

7
00:00:28,960 --> 00:00:31,750
So this doesn't automatically, you know, just move along.

8
00:00:31,910 --> 00:00:35,800
That's something you will need to implement by JavaScript, and that's something I want you to do as

9
00:00:35,800 --> 00:00:36,880
an extra task.

10
00:00:37,180 --> 00:00:50,940
OK, so to implement one really, really simple, we put a div class of Gref and then we pull a narrative

11
00:00:52,480 --> 00:00:54,670
and this every class of

12
00:00:58,000 --> 00:01:04,250
ball we have a roll which is progress bar.

13
00:01:04,750 --> 00:01:15,690
And then we Doyel and the style is basically how much of the ball we want to be filled with 50 percent.

14
00:01:15,710 --> 00:01:24,000
So 50 percent of it will be filled an area dash now.

15
00:01:24,010 --> 00:01:28,730
So the current value, which is about just 50, assuming we are doing two hundred.

16
00:01:29,090 --> 00:01:37,960
The reason we need the value is what we need to implement is maybe we are implementing a website where

17
00:01:38,200 --> 00:01:45,090
the user click the button and maybe tell these what is the current progress to do that you need the

18
00:01:45,100 --> 00:01:46,830
value and that's where he gets it from.

19
00:01:47,470 --> 00:01:50,200
And next, we need to specify

20
00:01:53,020 --> 00:01:55,930
area min.

21
00:01:56,110 --> 00:01:58,320
So what's the smallest value that we can take?

22
00:01:58,660 --> 00:01:59,280
Keep it simple.

23
00:01:59,620 --> 00:02:00,190
Zero.

24
00:02:00,670 --> 00:02:10,870
Next is the area that value Max equals one hundred or so range between zero to one hundred.

25
00:02:10,870 --> 00:02:15,310
If you want more precision, you could do zero to five, zero to ten thousand.

26
00:02:15,460 --> 00:02:19,270
If you want to be able to go into negatives, whatever reason, depending on what you are essentially

27
00:02:19,270 --> 00:02:27,940
displaying, if you go negative 100 or 200 or negative 50 or negative 17 to 10, whatever you want,

28
00:02:28,420 --> 00:02:33,780
but zero 200 is a good range, just percent there.

29
00:02:33,820 --> 00:02:37,540
That 50 percent is just basically what it is that we are going to do.

30
00:02:37,540 --> 00:02:43,000
If that's a new long care break line, I should say.

31
00:02:43,300 --> 00:02:45,670
And that way you can see a bit better.

32
00:02:45,680 --> 00:02:49,030
So you can see responsive and 50 percent across.

33
00:02:49,270 --> 00:02:59,140
So if I change this to, say, some five percent on only the text changes, we need to change this and

34
00:02:59,140 --> 00:03:05,440
this because obviously values are important as well that we are never seventy five percent of the way

35
00:03:05,440 --> 00:03:07,920
along regardless of the screen size.

36
00:03:08,170 --> 00:03:12,130
So, yeah, what we need to do as an extra task is implement a button.

37
00:03:12,460 --> 00:03:19,770
And when you click the button, it essentially, lets say, just adds one to the progress so far.

38
00:03:20,090 --> 00:03:23,310
I click to go to them six, click again, go to seven.

39
00:03:23,530 --> 00:03:26,260
So you know what you need to do.

40
00:03:26,470 --> 00:03:29,530
You won't need JavaScript in your JavaScript.

41
00:03:29,710 --> 00:03:33,130
You will need obviously we need some button as well.

42
00:03:33,130 --> 00:03:35,980
You need to detect when the button has been clicked.

43
00:03:37,060 --> 00:03:43,030
Then within that event you will need to get hold of this.

44
00:03:43,030 --> 00:03:49,990
I recommend attaching some I.D. to it so you can easily get hold of the specific progress bar and then

45
00:03:50,020 --> 00:03:56,020
you will need to use JavaScript to manipulate the style attribute or, you know, the more specifically

46
00:03:56,020 --> 00:04:01,480
the width and the value now and also the text inside the content.

47
00:04:01,480 --> 00:04:04,000
And so that's why you need to do as an extra task.

48
00:04:04,210 --> 00:04:06,580
If you have any questions, feel free to put me on message.

49
00:04:06,580 --> 00:04:11,020
And as usual, I look forward to seeing you in the next awesome bootstrap video.