Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 02 2013


10 Creative Loading Effects for Your Website

People hate waiting. It is a fact that web designers and developers should accept. It has been quite a maxim that as designers, we shouldn’t make our viewers wait. This is because many people tend to get bored and choose a website that loads faster. And that, my friend, is a big no-no.

However, waiting is seemingly inevitable. Despite modern internet connection speeds, some browsers still take time to load web elements. So it becomes a need to make people still want to visit your website even if it takes a little bit of time when they load it. There are a lot of plausible solutions for this, and I have to say, that our topic for this article is one of these.

Loading effects are very good tools to keep your viewer in viewing your website. It is not commonly used and that could be an edge. If you don’t want your viewers to wait, then give them something to look at (or do) while they’re waiting.

I know what you’re thinking, where the heck will I find these loading effects? And how can I include them in my website?

Well, that’s why we’re here. We collected 10 of the best website loading effects! Here you go, try these:

1. Creative Loading Effects


This tutorial is a thing of beauty. You’ll love this one because it does not showcase a single effect; you can choose from a wide variety of effects. Try and click the demo and play with it.

2. Spinning Loading


With bold red words written ‘Loading’ in it, this snippet is also a creative way of letting your viewers wait. It is clean-looking and relatively easy to use.

3. Planets


It’s both peculiar and cool to see these planets dancing. This effect could be very good for websites which adapts a cutey-patootsy layout.

4. Sinister Loadscreen


Yes, this loading effect seems sinister and dark. But it’s a good effect to intrigue your readers by shrouding your website with some sort of cryptic and evil.

5. Yet Another Loading Animation


This loading animation is simple and yet full of movement. You’ll love the rhythm of its motion. Perfect for music-oriented websites!

6. CProgress


Cprogress uses JQuery to magnificently show a very cool and easy to use loadscreen. Be awed as you tinker into these lines of code because they are fully customizable!

7. Spin.js


Spin.js will make your world and imagination spin! Using sliders, you can easily customize how you want your loadscreen to be. Perfect for Mac and Windows 8 lovers.

8. Alessio Atzeni


This guy’s cool tutorial is very easy to follow since it uses CSS3 and HTML only. It also comes in three different templates to choose from.

9. Facebook-ish Loading Animation


If you want your website to look like Facebook, this loading effect will be a great help. It adapts the Facebook load effect (the one that shows up when you load photos).

10. Flickr Style


Here’s one for the Flickr lovers! You’ll love to put this in your website because the effect looking simple and edgy.


With the ten effects you just saw, waiting could never be as bad as web designers think it to be. In fact, your viewers will find it otherwise. They will love your website because even at the moments where they have to wait, they could readily feel the creative juice you just gave in for your beloved website.

No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...