WEBVTT 0 00:00.450 --> 00:00.810 All right. 1 00:00.810 --> 00:05.680 As you can see, we've got a blank Visual Studio Code on the left, and we've got the browser on the right. 2 00:05.700 --> 00:07.920 I want to discuss this progress element. 3 00:07.920 --> 00:11.730 Firstly, as I mentioned, it requires an opening and a closing tag. 4 00:11.730 --> 00:17.940 And two very important attributes with the progress element is this max attribute and let's just set 5 00:17.940 --> 00:18.600 it to 100. 6 00:18.600 --> 00:24.870 So now the range will be from 0 to 100 and let's give it a value of 70. 7 00:24.900 --> 00:25.410 How is this? 8 00:25.410 --> 00:26.730 Let's save this. 9 00:26.910 --> 00:28.620 And there it is on the browser. 10 00:28.980 --> 00:29.940 And I can even zoom in. 11 00:29.970 --> 00:33.210 This is default styling provided by the browser. 12 00:33.210 --> 00:34.050 How cool. 13 00:34.050 --> 00:40.050 Now, at first you might be thinking it's a replaced element, kind of, because if we put content inside 14 00:40.050 --> 00:42.840 the opening and closing tag, we don't see anything. 15 00:43.110 --> 00:51.420 We can put an H2 tag saying, you know, progress is 70% and of course nothing happens. 16 00:51.420 --> 00:53.040 This is only for screen readers. 17 00:53.040 --> 00:59.100 It's only for those default instances where the browser doesn't recognize the progress element. 18 00:59.460 --> 01:07.030 The next important thing I just want you to realize is that the progress bar can be in two different 19 01:07.030 --> 01:14.470 states at any given time, an (1) indeterminate state and a (2) determinate state. 20 01:14.470 --> 01:15.610 "So, what are the differences 21 01:15.610 --> 01:19.810 Clyde?" Well, it all boils down to this value attribute. 22 01:19.960 --> 01:25.690 If it's in an indeterminate state, it means that there is no value attribute. 23 01:25.720 --> 01:26.620 Let me show you what I mean. 24 01:26.620 --> 01:28.120 Let's remove this value attribute. 25 01:28.300 --> 01:35.290 Let's save. Now it's in an indeterminate state and you can see the inner little toggle keeps moving. 26 01:35.290 --> 01:39.520 It shows the user that the state of progress is currently unknown. 27 01:40.130 --> 01:46.070 For example, how long it will take for a web server to initialize the download of a file if it's generating 28 01:46.070 --> 01:47.060 it on the fly. 29 01:47.090 --> 01:49.730 You might have to show, "hey, we've just got to wait". 30 01:49.730 --> 01:53.210 And of course how this looks will vary from browser to browser. 31 01:53.210 --> 01:55.140 So that's the indeterminate state. 32 01:55.160 --> 02:01.400 Obviously when you include now a value attribute, let's say it's 50, it shows more of what you and I 33 02:01.400 --> 02:03.890 would think as a progress bar, right? 34 02:03.920 --> 02:07.460 It indicates the completion progress of a task. 35 02:07.730 --> 02:09.980 Here we are 50% complete. 36 02:10.250 --> 02:14.120 And another thing I want to show you is it is quite easy to style the progress bar. 37 02:14.120 --> 02:18.320 We can access the progress element itself. 38 02:18.350 --> 02:18.860 I don't know, 39 02:18.860 --> 02:22.310 we can define its height as 2em. 40 02:22.910 --> 02:23.960 Pretty easy. 41 02:24.440 --> 02:25.910 We can affect its width. 42 02:26.510 --> 02:27.500 You know, we can do a lot. 43 02:27.530 --> 02:28.240 We can do a lot. 44 02:28.250 --> 02:36.020 And in fact we can use many of the standard CSS property selectors to style this progress bar. 45 02:36.320 --> 02:40.290 For example, we can use the not keyword. You know what? 46 02:40.320 --> 02:41.490 Let me actually just show you. 47 02:41.490 --> 02:43.860 Let's just say we didn't have this value attribute here. 48 02:43.860 --> 02:49.260 And then what we can do in CSS is target all progress bars that don't have a value. 49 02:49.290 --> 02:49.920 How do we do that? 50 02:49.920 --> 02:56.490 Well, we can use the CSS "not" keyword, and we want to target all progress bars that do not have a 51 02:56.490 --> 02:57.540 value attribute. 52 02:57.840 --> 03:00.480 So just very, very interesting. 53 03:00.480 --> 03:01.620 And you can see this works. 54 03:01.890 --> 03:03.300 Let's give it a huge height. 55 03:03.300 --> 03:07.980 And of course, if we put this value attribute back, let's just say it's 50, 56 03:08.310 --> 03:13.620 you know, those stylings that we've just defined here are not going to apply because they only apply 57 03:13.620 --> 03:16.350 on progress bars that do not have a value. 58 03:16.710 --> 03:17.040 "Okay 59 03:17.040 --> 03:18.690 Clyde, but how do we get more specific? 60 03:18.690 --> 03:20.090 How do we get our hands dirty? 61 03:20.100 --> 03:23.290 How do we really style this progress bar?" 62 03:23.310 --> 03:27.030 Well, in order to do that, we can target webkit. 63 03:27.060 --> 03:28.050 What? 64 03:28.050 --> 03:36.160 Just remember that every browser is backed by a rendering engine that draws the HTML and CSS web page. 65 03:36.180 --> 03:38.430 Firefox uses gecko. 66 03:38.460 --> 03:43.350 I'm not really going to show you Firefox, but you can use the exact same approach I'm using here on 67 03:43.350 --> 03:46.050 Google. Safari uses webkit. 68 03:46.080 --> 03:50.280 Chrome uses Blink, but Blink is kind of a fork of webkit. 69 03:50.700 --> 03:55.950 So I want to show you how we can use webkit to style this in detail. 70 03:56.340 --> 03:57.240 Let me show you what I mean. 71 03:57.270 --> 03:58.740 Let's inspect this page. 72 03:59.460 --> 04:01.080 Let's actually make this browser big. 73 04:01.080 --> 04:02.160 Let's inspect this. 74 04:04.910 --> 04:05.510 Okay. 75 04:05.600 --> 04:08.780 What we can do is open up our progress element. 76 04:08.780 --> 04:13.070 And in here we've got this shadow-root which is created by the DOM. 77 04:13.190 --> 04:18.140 And here you can see that our entire progress bar is wrapped within this div. 78 04:19.260 --> 04:23.190 It has a pseudo element of -webkit-progress-inner-element. 79 04:23.190 --> 04:27.600 And if we open up this, we've got three items we can target, right? 80 04:27.600 --> 04:29.220 We've got the actual progress value, 81 04:29.250 --> 04:33.150 right now it's blue. And then we've got the progress bar itself. 82 04:33.150 --> 04:37.680 So why don't we target the progress bar, which is gray and make that a certain color? 83 04:37.680 --> 04:38.790 Let's just do pink. 84 04:38.790 --> 04:45.750 And why don't we then target the actual progress value and make that another color, let's say tomato 85 04:45.750 --> 04:46.200 red? 86 04:46.230 --> 04:47.430 How would we do that? 87 04:47.460 --> 04:48.960 Well, it's very, very simple. 88 04:48.960 --> 04:51.180 All we have to do is go to our text editor here. 89 04:51.210 --> 04:54.360 Let's just remove this progress:not, it's just getting in the way. 90 04:54.390 --> 05:01.380 Listen, the first thing you have to do is we have to grab our progress element, and I want to remove 91 05:01.380 --> 05:04.830 all webkit appearance properties 92 05:07.760 --> 05:08.390 to none. 93 05:09.790 --> 05:11.700 So, yeah, very ugly, right? 94 05:11.710 --> 05:18.160 But now we have a lot of flexibility because we can target now the pseudo element, right? 95 05:18.160 --> 05:21.820 And it was called webkit-progress-bar. 96 05:22.180 --> 05:30.010 There, my IDE tells me. It's really, really handy. And here we can just change the background to I don't know, 97 05:30.010 --> 05:31.030 let's do a pink. 98 05:32.520 --> 05:33.990 How cool is that, my dear students. 99 05:33.990 --> 05:38.040 So we've just changed the background color of our progress bar to pink. 100 05:38.040 --> 05:40.230 What about that actual value, 101 05:40.260 --> 05:40.560 right? 102 05:40.560 --> 05:41.880 Right now the value is set to 50. 103 05:41.910 --> 05:45.300 Let's say the value is set to 20, right? 104 05:45.300 --> 05:46.050 It's green. 105 05:46.050 --> 05:47.340 How do we affect that? 106 05:47.370 --> 05:56.280 Well, as I showed you, we can target the webkit-progress-value pseudo element, and let's change that 107 05:56.280 --> 05:57.150 background 108 05:58.100 --> 05:59.960 to, I don't know, tomato. 109 06:00.380 --> 06:01.130 Save it. 110 06:01.130 --> 06:01.930 And there we go. 111 06:01.940 --> 06:04.000 I just wanted to show you a very quick example. 112 06:04.030 --> 06:05.240 Hope it's making more sense. 113 06:05.240 --> 06:07.490 Hope you're not feeling so intimidated by all this. 114 06:07.790 --> 06:11.720 And it really is a lot of fun when you start getting getting your hands dirty. 115 06:11.900 --> 06:12.680 So there we go. 116 06:12.680 --> 06:13.730 That's the progress element. 117 06:13.730 --> 06:17.060 I don't want to jump back into the lecture right now because it's getting a bit long. 118 06:17.060 --> 06:21.440 So in the next lecture I want to talk about the meter bar. 119 06:21.440 --> 06:23.420 We've spoken about the progress bar. 120 06:23.420 --> 06:25.670 Next, I want to speak about the meter bar. 121 06:25.700 --> 06:26.540 See you now.