12 Creative, Clever Loading Screens

Gabrielle Gosha

You never want your web visitors to wait. Some argue that the use of a loading screen on your website is unnecessary and can potentially discourage your visitors. Others contend that with ever-quickening connection speeds and a distinct need to stand apart, well-designed immersive websites are well worth the wait. Regardless of where you stand on the matter, it is hard not to appreciate a clever, creatively-designed loading screen that transforms a test of patience into something playful and captivating.

From hand-drawn designs to loading screens that implement 3D elements, there is a multitude of ways to design an clever preloader. If you have ever thought about adding a loading screen to your website, this is the showcase for you. Today, I share 12 inspirational loading screen animations that will hopefully fuel your imagination and inspire you.

SectionSeven Inc.

1load

SectionSeven’s site is already visually creative given its unorthodox horizontal scrolling. Their loading screen furthers the creative look and design by using vertical lines. While the site loads, various lines in various colors begin to grow from the bottom of the screen to the top. It’s a simple but effective design.

Escriba

2load

It’s always a good idea to try to brand and contextualize your website elements. Escriba’s loading screen makes perfect sense for the website as a whole. Their loading image uses a cute chef character who is baking. To top it off, when the loading finishes a “ding” noise reminiscent of a cooking timer is heard.

ZZZ

3load

Your loading screen doesn’t always have to stay in the center of your screen. If you’re creative enough you can very easily have the loading utilize the entire space. ZZZ’s achieves this very easily with the use of color and movement. The sheep, the clouds, and the moon complement the night sky.

Max Shaman

4load

Shaman’s site as a whole is wonderfully inspiring. The treatment of the loading page is a great touch, because not only does the moderately-creepy voodoo doll show up on the screen, but it appears even bigger on the actual website itself, needles and all.

Platin

5load

A great way to design your loading page is by utilizing an element that can grow, developed, or transform as your site loads. This conveys that the site is loading and gives the visitor the indication of progress. Platin does this perfectly with their watercolor-esque design of a building that begins to be surrounded by growing trees.

Museum of Science and Industry

6load

Depending on your website’s targeted demographics and subject matter, you can get away with using a cute character to attract attention and entertain the visitor briefly until your site is finished loading. The MSI does this on their website by having an appealing character dance as the site loads.

Food of the Food

7load

It isn’t unheard of to create strange and maybe unsettling designs whether for print or web. You might also incorporate hand-drawn elements into your website. Food of the Food accomplishes both simultaneously. The character is entangled in spaghetti; as they look on in peril, the hand-drawn image is slowly filled with color to indicate the loading time of the site before completing the homepage.

Erky Perky

8load

Erky Perky’s website has great graphics, attractively designed characters, and an all around sharp preloader design. You can’t help but be intrigued by their little caveman character running on top of the loading bar.

Xixi No Banho

9load

Simple solutions can make for superb designs, and choosing simplicity doesn’t mean that visitors will be less impressed. Banho’s loading screen is simplistic but well beyond the standard, uninspired progress bars. The bright and welcoming colors of the site itself is perfectly paired with the loading bar. The animation added once the site is finished loading is testament to what is in store for those who actually explore this exceptionally creative site.

Mary and Max

10load

If you are into films and animations, then you are no stranger to loading screens. More often than not, websites for visual entertainment will feature some form of preloading graphic before the homepage. This is no different for the Mary and Max site. The loading image is a simple yet engaging with the use of a retro-inspired television screen that broadcasts a countdown until the site loads.

W. Brett Wilson

11load

Another simple but clever loading screen can be found on W. Brett Wilson’s website. The site itself is creatively designed, and when you explore it you will find that the loading image makes perfect sense. The simple animated graphic of a man running on a hamster wheel creates a relatable context.

Identification05

12load

Identification05′s 3D graphics and jumping character is truly inviting. The site quickly loads similar graphics and characters. Pair that up with the well-chosen music, sound effects, and color choices and you end up with an artful website.

What do you think about websites using loading screens? Should you avoid them at all costs, or are there ways to turn a tedious loading time into a clever introduction? Do you have any favorites above?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Nick

    For getting people to stick around on the first visit I think it would definitely help, but for subsequent visits it would probably becoming annoying once the novelty/entertainment factor wears off. But if a long page load is unavoidable, and repeat visits are sought, it would be better if the entertainment changed on each one, so maybe if loading screens cycled between several story lines which were eventually repeated…

  • Derek Nugent

    Many thanks for sharing. You’ve given me something to think about!

  • Ted

    All were Flash sites so all were useless to me except for the W. Brett Wilson site which at least acknowledged that not everyone has Flash available therefore he provided a workaround.

  • Phil.T.Tipp

    Awww, what a shame. Flash junk throughout. Come on, it’s the second decade of the twenty first century.

    Move along, nothing to see here.

  • Yabbacocka

    Flash soon to be a goner – looking for HTML5 preloaders!
    Excellent observation by Nick2 – thanx for that

  • benoka

    idiots.
    flash would never gone too soon.
    you’re all just bought all the trend’s marketer big mouth.
    flash and java (not javascript) has become the essentials ingredients for cyber-tech.