From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Style a progress bar

Style a progress bar - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Style a progress bar

“

- [Chris] Hi, this is Chris Converse, and in this episode, we'll be creating and styling a progress bar, one that can adapt to various values in order to provide feedback to a user. So if you'd like to follow along, download the exercise files, and let's begin by opening the HTML file in a text editor. And so once you have the HTML file open, you'll see up in head area, we have a link to style.css. We'll be opening this in a moment. And then inside of the HTML file, we have an article element, and I have a comment here where we're gonna be adding the HTML for the loading bar, and you'll also see that I have a JavaScript down here. We're gonna start by hardcoding some values into our progress bar, so we can add some styles. Then we're gonna come back here and turn on this JavaScript so we can dynamically put new numbers in place. So we can see how our design adapts to various values. So to begin, let's come up here to the loading bar comment, let's delete that. Let's add a div. Let's…

Contents