From the course: Learning Web Audio and Video
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Design your progress bar
- [Instructor] The progress bar as it currently exists, has absolutely no visual properties whatsoever. We'll now use CSS to style and size the progress bar so that it's useful to the user interacting with our playback. Inside of visual studio code, let's have a look and see how our progress bar is made. So we have our div here, which is a control bar rail id. And this is going to be, sort of the container for our control bar fill div. So we need definitions for both of these. And we'll create those in our style block right up here. Since these are both divs with ids. We can target them specifically with an id. So we use hash, control bar rail. And we can just copy and paste that. And change that to control bar fill. Now for control bar rail, we need some visual, stylistic elements to these. So we're going to set a background color, height and we'll even set a little bit of margin to it to space things out nicely. So we'll set background color. And we're just going to set this to dark…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.