Smashing Magazine - we smash you with the information that will make your life easier. really.

When it comes to Flash, images, animation, videos and sound effects are often used on large scale. Consequence: in most cases Flash takes quite much time to load and requires a good dose of patience from users. Users know it and are often willing to give a Flash-site some time to load. However, to count on user’s patience, Flash-designers need to inform site visitors how much patience is actually required. If it isn’t done, the latter have no anchor point to estimate how much more time is needed and consequently close the browser window thinking that the site simply doesn’t work properly.

Flash-preloaders are supposed to avoid exactly this. Most designers inform visitors about the state of the loading process by filling site areas, growing bars, incrementing counters or simple percentage values presented on the screen. However, preloaders don’t need to be boring. Often designers integrate unusual solutions to keep user’s focus on the site while it is loading. Thus Flash preloaders often fit to the overall design and work as a teaser for the content of the site.

It’s important to inform visitors about what is happening. ff0000 informs the visitors about the modules which are loaded on the site. But does the visitor want to know it? Percentage values usually work better.

In this post you’ll find some creative Flash-preloaders which may serve as an inspiration for your Flash-projects. Please notice that sometimes you need to look closely and precisely in order to find the preloader. Depending on the server load and your connection preloaders may quickly disappear. In most cases it’s not a disadvantage — well, at least it shouldn’t be.

Please notice that

• you might also want to take a look at the article 65 excellent Flash-designs we’ve published earlier,
• this selection is not ultimate and isn’t supposed to be the best of; it is intended to provide you with some ideas for creating your Flash-preloaders once you need to — please share your favourite Flash-preloaders in the comments to this post.

1. Filling areas with colors.

Often designers integrate the preloader right in the content of the site. The more data has been loaded, the more colorful a web-site looks like. Sometimes also single design elements are first presented on the preloading page. Since they have to attract visitors’ attention, they’re usually attractive, strange or shocking.

At the beginning users see a draft in black and white; as the page is loading, a draft becomes a colorful design.

Changing from black-white background to a red one. It’s worth to wait until the page is loaded, too.

Bernstein Rein uses the area to fill it with the growing number of dots.

Today Headlines in Photos seems to use a water gauge. It raises.

Apparently, you won’t be able to escape here.

The “C” is being filled up.

This preloader grows vertically: Section Seven

2. Typography in use.

Very elegant preloader with big typo.

Logos of works presented in the portfolio fly in. Big typography in use.

To show how much data is already loaded, one can use words Instead of numbers. Big words.

Really big numbers. Well, apparently, “typography kicks ass”. This is the title of the site.

While the page is being loaded, the system fills blank letters with a marker. Hand-drawing perfectly fits to the overall design of the site.

3. Mascots, Cartoons & Co.

A huge round theme by a Spanish bakery.

While you are waiting you can as well play with a dog.

On Orange bees are collecting honey…

…and on oopsDesign we see a pretty sceptic bird. Apparently, it is running from one side of the slider to another one all the time.

This guy is running toward you, passing away road signs — obviously, they stand for the percentage values.

Well, this one is scary, but unusual. Which is why this preloader with a poppy and needles is featured in this post.

Mouse n Brush uses a turtle for preloading. The site is loading pretty quickly though.

4. Using metaphors.

Almost every object can be integrated in a Flash-preloader and serve as a metaphor for the main idea, concept or message the site is trying to deliver. The possibilities are endless; however, designers need to make sure that the object fits and doesn’t look too strange, so the users’ interest will be sparked.

A design agency tries to capture users’ attention with a vibrant colors, a message and a… fire extinguisher.

Filling beer: the site is indeed related to a Swedish beer.

Two obscure measuring devices.

Preloading as an injection. Of course, it fits to the content of the site — the (not so) scary movie “Gothika”.

As the page is being loaded, the number of i’s in the text “file is diiiis big” decreases. You might want to develop this idea further and use a more attractive visual presentation, of course.

This loader is a part of splash page: Farm

Color in Motion thanks for the patience.

An old-style mechanism in use.

This one flies all over the screen.

Previsuals imitates a helicopter.

A thermometer on the start page of a online shops

Fueling up, please stand-by.

5. Simple loading bars, well presented.

Since pure loading bars are well-known from most desktop- and web-applications, they can also be used in Flash-loaders. Main idea behind it: users know instantly that the page is loading and don’t need to figure it what is it actually they’re looking at.

Not every loading bar is as subtle as this one.

Simple yet effective. The loader is a simple slider, however notice how well it fits to the logo badge of the site. While the page is loading, bubbles are floating all over the place.

The loader design fits perfectly to the overall design of the site.

Simple, but visually appealing.

This loader is simple, but corresponds to the theme of the site.

This preloader bar grows diagonally.

Message and hearts on E.G.G.

6. Experimental solutions

Doesn’t it look familiar to you?

This preloader hangs on the rubber.

This preloader shows milestones on the road.

For a Flash-preloader Honda’s promo-site shows a variety of activities. When the letters are clicked, dozens of animated characters built up the word “Honda” on the screen.

Numbers jump all over the place.

The preloading starts with a blurred video.

A circular preloader from Iran: Mohammad Rahimi

Animated ornaments from Brazil.

The official site of the movie “Once upon a time in Mexico” opens with firearm components being put together.

Hand-writing on offfice:mac.

The colors, symbolizing each section of the site, are stacked upon each other. Not intuitive, but pretty colorful.