CSS3 Progress Bar


Works in Desktop Safari, Desktop Chrome, Android, iPhone, iPad. Displays properly but does not animate in Firefox 3.5-4 because it lacks CSS3 keyframe animation.

Since CSS3 provides a way to create gradients, including striped repeating patterns, it is possible to create the barbershop striped progress bars used on Mac OS X. Using the technique described in a previous post about CSS3 striped gradient patterns, we can easily create a self-animated progress bar. To start with, the HTML5 markup is dead simple, just a div with a class:

<div class="progressBar"></div>

We’ll start off by giving the div some basic styling as the container for the gradient:

.progressBar {
	width: 300px;
	height: 15px;
	border: 1px solid #bfbfbf;
	margin: 40px auto;
	position: relative;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.5);
	background-color: rgb(56,138,213);
}

This will result in:
progress bar base

This is the base upon which we will now proceed to lay various gradient patterns to create a progress bar. Luckily CSS3 provides a way to implement multiple backgrounds, so it is just a matter of creating and layering them correctly. We start with the first layer, consists of a repeating pattern of diagonal white stripes with transparent stripes between it. This will allow the background color to show through:

background-image:
	-webkit-gradient(linear, 18 0, 0 10,
		color-stop(0.23, rgba(255,255,255,0)),
		color-stop(0.3, rgba(255,255,255,0.8)),
		color-stop(0.3, rgba(255,255,255,1)),
		color-stop(0.7, rgba(255,255,255,1)),
		color-stop(0.7, rgba(255,255,255,0.8)),
		color-stop(0.77, rgba(255,255,255,0)));

This will give us:

progressbar with stripes

This is getting close to what we want, except that it’s very flat looking. We’ll add some more layers of gradients to add some depth. We’ll start with some shadows. To do this we’ll create a gradient with translucent black and the start and end with translucent white in the middle. This will make the progress bar appear to be cylindrical. Note that we set the background to repeat on the x axis and that we define a size for the repeating stripes using the background-size property:


.progressBar {
	width: 300px;
	height: 15px;
	border: 1px solid #ddd;
	border-bottom-color: #666;
	margin: 40px auto;
	position: relative;
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	background-color: rgb(56,138,213);
	background-image:
		-webkit-gradient(linear, 18 0, 0 10,
			color-stop(0.23, rgba(255,255,255,0)),
			color-stop(0.3, rgba(255,255,255,0.8)),
			color-stop(0.3, rgba(255,255,255,1)),
			color-stop(0.7, rgba(255,255,255,1)),
			color-stop(0.7, rgba(255,255,255,0.8)),
			color-stop(0.77, rgba(255,255,255,0)))/,
		-webkit-gradient(linear, 0 0, 0 100%,
			color-stop(0.05, rgba(0,0,0,.3)),
			color-stop(0.06, rgba(255,255,255,.8)),
			color-stop(0.45, rgba(255,255,255,.05)),
			color-stop(0.55, rgba(0,0,0,.05)),
			color-stop(0.85, rgba(0,0,0,.2)),
			color-stop(0.98, rgba(0,0,0,.5)));
		background-repeat: repeat-x;
                -webkit-background-size: 20px 15px;

This gives us:

progress bar with shadow

We are going to give the progress bar one more gradient layer to add a highlight gloss to it. To do so we’ll create a white band across the top half with opacity set to 50%. So here’s the complete background image:


background-image:
	-webkit-gradient(linear, 18 0, 0 10,
		color-stop(0.23, rgba(255,255,255,0)),
		color-stop(0.3, rgba(255,255,255,0.8)),
		color-stop(0.3, rgba(255,255,255,1)),
		color-stop(0.7, rgba(255,255,255,1)),
		color-stop(0.7, rgba(255,255,255,0.8)),
		color-stop(0.77, rgba(255,255,255,0))),
	-webkit-gradient(linear, 0 0, 0 100%,
		color-stop(0.05, rgba(0,0,0,.3)),
		color-stop(0.06, rgba(255,255,255,.8)),
		color-stop(0.45, rgba(255,255,255,.05)),
		color-stop(0.55, rgba(0,0,0,.05)),
		color-stop(0.85, rgba(0,0,0,.2)),
		color-stop(0.98, rgba(0,0,0,.5))),
	-webkit-gradient(linear, 0 0, 0 100%,
		color-stop(0.25, transparent),
		color-stop(0.25, rgba(255,255,255,.5)),
		color-stop(0.47, rgba(255,255,255,.5)),
		color-stop(0.47, transparent));
        background-repeat: repeat-x;
	-webkit-background-size: 20px 15px;

And our final progress bar looks like this:

progress bar complete

Because it’s a progress bar, we want it to animate continuously while it’s displayed. This requires some initialization code in the CSS and two lines of CSS for the animation. Because we’ll animate the stripes on the progress bar across the length of it, we need to set the initial position of the background image, which will be 0. We define the animation to last ten seconds, to loop continuously, to use linear easing and to use an animation named “progressBarAnim.” We define the progressBarAnim using keyframes next:

-webkit-background-position-x: 0%;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: progressBarAnim;

CSS3 keyframe animations have a start and end value. Unlike transitions, you can define whatever properties you with to at any point in the animation sequence. Because we are animate the progress bar’s stripes from one end to the other, the keyframe animation is very simple, we just need to animate the x position of the gradient from 0% to 100%. Because we set the iteration count to infinite, it will automatically loop back:


@-webkit-keyframes progressBarAnim {
	0% { background-position-x:  0%; }
	100% { background-position-x: 100%; }
}

You can see this in action on Safari, Chrome, Android, iPhone or iPad, or download the source files.

About these ads

About Robert Biggs
Front end Web developer skilled at creating interactive, dynamic interfaces using HTML5, CSS3, JavaScript, SVG. Passionate about developing awesome user experiences in the mobile space.

Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 46 other followers

%d bloggers like this: