Loading… and how css can help

by Michael Scharnagl

This article has been updated the last time on February 5, 2012 and the given information may be not accurate anymore. Feel free to contact me on twitter to get more details.

The simplest form of showing an animated Loading… has been around since the early days of Internet Explorer. The marquee element and his counterpart the even worse blink element has never been part of the w3c specifications because of their terrible usability and accessibility.

Nevertheless at least the marquee still works in most browsers nowadays.

Loading...

Please have a look (don’t try it at home):

Loading…

Loading… the right way?

After playing around a bit with css3 animations and pseudo elements here is my solution. Have a look at the dabblet if you wanna play around with it.

Loading, please wait
@keyframes load {
	0% {left: 0; background-color: #ddd}
	50% {left: 80px; opacity: 0.8; width: 70px}
	100% {left: 200px; width: 20px; opacity: 1; background-color: #ddd}
}

@keyframes hideload {
	0% {background-color: #fff}
	100% {background-color: #fff}
}

#progress:before {
	position: absolute;
	z-index: 1;
	content: "";
	width: 300px;
	height: 20px;
	animation: hideload 2400ms infinite alternate
}

#progress:after {
	content: "";
	z-index: 2;
	position: absolute;
	left: 0;
	border-radius: 4px;
	width: 20px;
	height: 20px;
	animation: load 2400ms infinite alternate
}

You probably have seen much more fancy loading bars but I wanted a solution which is also compatible with older browsers and more accessible. If you remove the animations from the pseudo elements you will see how it looks like in older browsers and although not tested how screen readers will read it.

Just the phrase “Loading, please wait”.

To achieve that I used the simple trick to hide the text via the animation on :after immediately. This way all browsers with no support for animation simple see the phrase while browsers with support see the loading animation.

What’s your solution?

Michael Scharnagl

Portrait Michael Scharnagl

Follow me: @justmarkup

Subscribe to RSS: /feed

A freelance front-end developer focusing on HTML5, CSS, progressive enhancement and web performance.