This is the first post of my new blog series called Deconstructions. Showcasing cool things people are doing in web development and breaking them down step by step. My first target is a cool content placeholder from the most recent Facebook overhaul. Before your friend’s latest selfie or dog picture loads you may have noticed this nice bit of polish.
What is it?
Straight to the point here it is. Below you can see my clone and my HTML (I changed a few things to make it easier to see):
As you can see the demo only contains three types on elements:
This is the easiest bit, it’s just a centered div to wrap the content. I chose to use the same colours as Facebook.
A Fancy Animated Background
This is where the magic happens. It’s a box that is has a animated background and that background happens to be a CSS gradient.
Plenty of Tiny Masking Blocks
Without these the previous step just looks like a stupidly large progress bar. This gives the shape to the placeholder. It’s just lots of little white divs that sit on top so you can’t see the animation. This part gets messy fast. I have added some borders to this version to illustrate where the masks are placed (Try hovering on each block).
Why would I ever use this?
We can’t always remove having to wait for information but we can make the wait feel shorter. By giving some indication of what is going on and giving visual stimulus the user feels immediately more comfortable and less likely to leave. This is exactly like putting a progress bar on a long action. Apart from the fact it’s some fancy polish, it’s great usability. I think this feature is better than your average loading symbol because it actually feels like the content is almost there. After a quick search I found this article which explains it quite well.
I have been looking for a situation I can use a loader like this but sadly one has not come up yet. I may use it for the upcoming GitHub integration while I am loading the list of repositories. If you found this useful or have any questions feel free to comment below. I am going to try to do one of these a week so if you see something you want deconstructed let me know.
Note: I used unprefixed CSS in the code examples to keep it clean. You can use Our CSS Prefixer to get cross a cross browser version.
Join thousands of developers building sites on CloudCannon today