Labs: CSS Loaders

Loaders are nothing new. They have been around since computers could think, and when it comes to the interwebs they can be found on just about every good site . Although it may seem like a small forgettable feature — loaders can make a huge difference. When it comes to usability a loader is the only thing sitting between the screen and a user to tell them the page isn’t broken or blank.

With more and more browsers supporting css animations and SVGs, we have seen a move away from static images and the use of simple gifs. We are creating dynamic loaders out of pure css. Simple, clean, and lightweight, the pure css loader gives us the ability to act upon the page.

While adding a simple wheel loader is fine, we here at milkshake like to go a step further. We like to create loaders that tease the information on the site. That stand out and grab the users attention even when the content is not.

Here are some simple pure CSS loaders that we have made. We will be periodically updating the site, so check back soon.

Like what you read? Give Milkshake a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.