Above is a Dribbble shot I posted last week. You can see the production version here. It's a loader I created for one of the main products I've been working on lately, Shiplify.
Virtually every web application is going to take longer than a few seconds to load data and you need to let people know what's going on. There are lots of out of the box progress bars and indicators you can slap on a project, but custom loaders are a nice little touch in an application.
Custom loaders are a way of saying, "Hey man, I know that you're ready for this to be over, but in the meantime here's a little somethin' to let you know I'm thinking of you." It's also a great opportunity to work in some branding.
With my custom loader, I started off creating a prototype of an animated Shiplify logo in Flash, 'cause I'm old school like that. Here's a look at my timeline.
I thought about stopping here, converting to a gif and being done with it, but one gif won't cut it when you're dealing with multiple screen sizes, retina displays, etc. Plus, gifs on mobile devices can be quite janky.
Markup
The next logical step was to recreate it with code. Here is the markup for the individual pieces. I wanted a light grey background with animated green pieces. Here I'm using divs for the main background pieces and spans for the soon-to-be animated pieces.
You can see that each block has a block-global class as well as it's own unique block-# identifier.
Moving on to the Sass
I created the styles for each piece. The logo is quite simple so this was fairly straightforward. I sized my logo to 100x100 in Photoshop to give me a 1:1 ratio for percentages to pixels. I needed these for margins and widths, as well as the height percentage for each individual block.
The tricky part was animating the green shapes the same way I created them in Flash. At first I animated each block with the same animation, with a delay set for each one. The problem with this is that after one time through the animation started going crazy if set to infinite.
After a quick pointer from Jon Suh, I realized I needed to space out my keyframes a bit more, much like I had done for my Flash prototype. So I took a screenshot of my timeline in Flash and used that to come up with the proper percentages for the animation.
Now that I had that figured out, it was easy to add those percentages to my keyframes in my Sass.
Sass keyframes
One last thing that was a bit tricky, was making this thing fully dynamic with the ability to scale up or down in size by the tweaking of a variable.
I knew that the vertical height of each block needed to be 7% in height but each block needed to be rounded to a whole pixel to keep the integrity of the design. After another tip from Chris Harrison, I managed to come up with this little formula to give me what I needed.
Sass formula for block height
And there you have it - a custom, reusable and fully scalable loader built entirely with CSS.
The entire project is on GitHub if you want to take a peek. Or better yet, optimize the keyframe code in _animations.sass I sort of hacked that together at the last minute to make it work.