All right.
As you can see, we've got a blank Visual Studio Code on the left, and we've got the browser on the right.
I want to discuss this progress element.
Firstly, as I mentioned, it requires an opening and a closing tag.
And two very important attributes with the progress element is this max attribute and let's just set
it to 100.
So now the range will be from 0 to 100 and let's give it a value of 70.
How is this?
Let's save this.
And there it is on the browser.
And I can even zoom in.
This is default styling provided by the browser.
How cool.
Now, at first you might be thinking it's a replaced element, kind of, because if we put content inside
the opening and closing tag, we don't see anything.
We can put an H2 tag saying, you know, progress is 70% and of course nothing happens.
This is only for screen readers.
It's only for those default instances where the browser doesn't recognize the progress element.
The next important thing I just want you to realize is that the progress bar can be in two different
states at any given time, an (1) indeterminate state and a (2) determinate state.
"So, what are the differences
Clyde?" Well, it all boils down to this value attribute.
If it's in an indeterminate state, it means that there is no value attribute.
Let me show you what I mean.
Let's remove this value attribute.
Let's save. Now it's in an indeterminate state and you can see the inner little toggle keeps moving.
It shows the user that the state of progress is currently unknown.
For example, how long it will take for a web server to initialize the download of a file if it's generating
it on the fly.
You might have to show, "hey, we've just got to wait".
And of course how this looks will vary from browser to browser.
So that's the indeterminate state.
Obviously when you include now a value attribute, let's say it's 50, it shows more of what you and I
would think as a progress bar, right?
It indicates the completion progress of a task.
Here we are 50% complete.
And another thing I want to show you is it is quite easy to style the progress bar.
We can access the progress element itself.
I don't know,
we can define its height as 2em.
Pretty easy.
We can affect its width.
You know, we can do a lot.
We can do a lot.
And in fact we can use many of the standard CSS property selectors to style this progress bar.
For example, we can use the not keyword. You know what?
Let me actually just show you.
Let's just say we didn't have this value attribute here.
And then what we can do in CSS is target all progress bars that don't have a value.
How do we do that?
Well, we can use the CSS "not" keyword, and we want to target all progress bars that do not have a
value attribute.
So just very, very interesting.
And you can see this works.
Let's give it a huge height.
And of course, if we put this value attribute back, let's just say it's 50,
you know, those stylings that we've just defined here are not going to apply because they only apply
on progress bars that do not have a value.
"Okay
Clyde, but how do we get more specific?
How do we get our hands dirty?
How do we really style this progress bar?"
Well, in order to do that, we can target webkit.
What?
Just remember that every browser is backed by a rendering engine that draws the HTML and CSS web page.
Firefox uses gecko.
I'm not really going to show you Firefox, but you can use the exact same approach I'm using here on
Google. Safari uses webkit.
Chrome uses Blink, but Blink is kind of a fork of webkit.
So I want to show you how we can use webkit to style this in detail.
Let me show you what I mean.
Let's inspect this page.
Let's actually make this browser big.
Let's inspect this.
Okay.
What we can do is open up our progress element.
And in here we've got this shadow-root which is created by the DOM.
And here you can see that our entire progress bar is wrapped within this div.
It has a pseudo element of -webkit-progress-inner-element.
And if we open up this, we've got three items we can target, right?
We've got the actual progress value,
right now it's blue. And then we've got the progress bar itself.
So why don't we target the progress bar, which is gray and make that a certain color?
Let's just do pink.
And why don't we then target the actual progress value and make that another color, let's say tomato
red?
How would we do that?
Well, it's very, very simple.
All we have to do is go to our text editor here.
Let's just remove this progress:not, it's just getting in the way.
Listen, the first thing you have to do is we have to grab our progress element, and I want to remove
all webkit appearance properties
to none.
So, yeah, very ugly, right?
But now we have a lot of flexibility because we can target now the pseudo element, right?
And it was called webkit-progress-bar.
There, my IDE tells me. It's really, really handy. And here we can just change the background to I don't know,
let's do a pink.
How cool is that, my dear students.
So we've just changed the background color of our progress bar to pink.
What about that actual value,
right?
Right now the value is set to 50.
Let's say the value is set to 20, right?
It's green.
How do we affect that?
Well, as I showed you, we can target the webkit-progress-value pseudo element, and let's change that
background
to, I don't know, tomato.
Save it.
And there we go.
I just wanted to show you a very quick example.
Hope it's making more sense.
Hope you're not feeling so intimidated by all this.
And it really is a lot of fun when you start getting getting your hands dirty.
So there we go.
That's the progress element.
I don't want to jump back into the lecture right now because it's getting a bit long.
So in the next lecture I want to talk about the meter bar.
We've spoken about the progress bar.
Next, I want to speak about the meter bar.
See you now.