1
00:00:00,600 --> 00:00:02,910
Hello and welcome to this lecture.

2
00:00:03,180 --> 00:00:10,500
In this lecture we will be creating a simple progress bar using bootstrap.

3
00:00:10,590 --> 00:00:16,180
This is the progress bar we'll be creating using bootstrap growth.

4
00:00:16,200 --> 00:00:19,580
Bars are useful course the key.

5
00:00:19,590 --> 00:00:26,360
Use a guy haas to how far he or she has left in the process.

6
00:00:26,370 --> 00:00:32,370
For example today could be plugged in an image or done lowder's something deprogramme by gives them

7
00:00:32,370 --> 00:00:36,420
a guide us to all their progress to begin.

8
00:00:36,450 --> 00:00:42,020
I have got my Some poor basic skeletal template here.

9
00:00:42,030 --> 00:00:51,510
I've got all my references to Louis bootstrap library on Maxy the in halcom I see SS and I'm on my Jav

10
00:00:51,510 --> 00:00:59,770
us Jav us group mini 5 version have also got access to my g query library hosted by Google see the.

11
00:00:59,970 --> 00:01:05,590
I've got all my links in place to the libraries so I just need to concentrate on my code.

12
00:01:05,700 --> 00:01:13,770
So in my code we call in-between this body tag here so let me start writing the code and I will explain

13
00:01:13,770 --> 00:01:14,650
that.

14
00:01:15,080 --> 00:01:18,590
I have got my code in-between the body tag.

15
00:01:18,660 --> 00:01:21,120
I started off with a diff.

16
00:01:21,540 --> 00:01:28,980
This would be the container div that will wrap all the content but trap is always useful to enclose

17
00:01:28,980 --> 00:01:37,320
your content in a container so that it might contain a D and then I went in to define a heading tag

18
00:01:37,890 --> 00:01:48,570
with a hitchon tag here and then paragraph tag just to define what the worst part is and then created

19
00:01:48,620 --> 00:01:52,730
on another div within that div call progress.

20
00:01:52,740 --> 00:01:59,970
So this class is called progress and then in between that DB I created on another div nested inside

21
00:02:00,510 --> 00:02:02,610
chord class.

22
00:02:02,610 --> 00:02:05,030
I give you a class B name.

23
00:02:05,040 --> 00:02:14,810
OK that is progress does bar progress but success progressed dashed past Tracht got three values.

24
00:02:15,030 --> 00:02:16,490
So progress bar.

25
00:02:16,740 --> 00:02:21,420
And this is the label problem that bars success ambits.

26
00:02:21,860 --> 00:02:25,210
And it's this striped request buys buys a big stripe.

27
00:02:25,380 --> 00:02:32,650
So these are the properties of the class and then I've given it a rule of progress bar.

28
00:02:32,770 --> 00:02:42,690
I've given it a value of 40 and given a mean value max value and giving it style of 40 percent that

29
00:02:42,690 --> 00:02:47,630
is 40 percent of its peer to contain and this 40 percent.

30
00:02:47,640 --> 00:02:52,690
Thus the message that will be or text that will be displayed in the progress.

31
00:02:52,690 --> 00:02:55,870
But so go the three days we are ready.

32
00:02:55,890 --> 00:02:58,670
Let me save this and run and then will have a look.

33
00:02:58,710 --> 00:03:01,280
While it looks like launching Chrome.

34
00:03:02,720 --> 00:03:05,920
Right so this is what the progress bar looks like.

35
00:03:05,920 --> 00:03:11,300
I'm going to apply background colour to the body just to make it more pronounced.

36
00:03:11,330 --> 00:03:14,310
I have had this far here in between the thumbtacks.

37
00:03:14,480 --> 00:03:23,660
Ideally I should use it and externals Tal shit but because this is a quick demo I just use an internal

38
00:03:23,660 --> 00:03:25,700
one is said so given the entire body.

39
00:03:25,730 --> 00:03:30,540
Background colour black and detect colour of white so let me say that.

40
00:03:30,560 --> 00:03:34,060
And then we can run it see what it looks like.

41
00:03:34,800 --> 00:03:41,200
Okay so it looks more defined now pronounce So this is what a progress bar looks like.

42
00:03:41,370 --> 00:03:48,920
He can see how simple it was news in Bootstrap because they provided most of the styling and the framework

43
00:03:49,340 --> 00:03:50,410
for the progress.

44
00:03:50,420 --> 00:04:00,650
But in this video we created a scene poor striped progress bar using the bootstrap progress bar component

45
00:04:00,980 --> 00:04:09,790
the progress bar is a component of the bootstrap framework we used to create a simple striped progress

46
00:04:09,800 --> 00:04:10,420
bar.

47
00:04:10,430 --> 00:04:13,150
There are different probers bars you can create.

48
00:04:13,250 --> 00:04:22,550
You can create animated ones play or ones and different coloured contextual types using bootstrap.

49
00:04:22,820 --> 00:04:24,890
Thank you so much for watching.

50
00:04:24,890 --> 00:04:31,160
You can easily incorporate this into any web projet you are doing so much for watching.

51
00:04:31,160 --> 00:04:32,360
Take care.

52
00:04:32,360 --> 00:04:33,680
Bye for now.