HTML and CSS Reference
Creating a Custom Progress Bar
Before the progress element was defined in HTML5, web application developers used a
couple of different scripting tricks in order to create the effect of a bar gradually filling up as
a task completes. One I've used successfully in the past is two div elements, one nested in
the other and with zero width. As the task progresses, the code changes the width of the inner
element. It's a simple, uncomplicated approach. You can even use an animated background to
create an animated effect, if you wish.
Since we have enough movement with the video, I decided to forgo the animated background
in favor of the linear gradient—gray for the outer div element, and a green reflecting a dom-
inant green from the video for the progressing bar.
The custom progress bar won't be tracking the playback of the video. It's tracking the progress
of the video load instead. To track the actual playback, I added another div element, but
this time one that has a background character—a purple butterfly like the one that appears
throughout the Big Buck Bunny video I used for the examples in this chapter. The HTML for
the page, without CSS and without scripting, now looks like the markup in Example 18 , with
the new elements in bold text.
Example18.New web page with custom control and progress bar
<title>Big Buck Bunny with Custom Controls</title>
<meta charset="utf-8" />
<video id="videoobj" width="480" height="270"
preload="none" poster="bigbuckposter.jpg" controls>
<source src="videofile.mp4" type="video/mp4"/>
<source src="videofile.webm" type="video/webm" />
<button id="stop" disabled>Stop</button>
<button id="pause" disabled>Pause</button>