Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Showcase Of Creative Flash Preloaders

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.

1
It’s important to inform visitors about what is happening. ff00002 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-designs3 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. Link

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.

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

Screenshot4

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

Screenshot Flash Loader6

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

Screenshot Flash Loader

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

Screenshot7

The “C” is being filled up.

Screenshot8

This preloader grows vertically: Section Seven9

Screenshot Flash Loader10

2. Typography in use. Link

Very elegant preloader with big typo.

Screenshot11

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

Screenshot

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

Screenshot12

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

Screenshot Flash Loader13

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.

14

3. Mascots, Cartoons & Co. Link

A huge round theme by a Spanish bakery15.

Screenshot Flash Loader16

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

Screenshot17

On Orange18 bees are collecting honey…

Screenshot Flash Loader19

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

Screenshot Flash Loader21

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

Screenshot Flash Loader22

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

23

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

Screenshot Flash Loader25

4. Using metaphors. Link

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.

Screenshot26

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

Screenshot27

Two obscure measuring devices.

Screenshot Flash Loader28

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.

29

This loader is a part of splash page: Farm30

Screenshot Flash Loader31

Color in Motion32 thanks for the patience.

Screenshot Flash Loader33

This one flies all over the screen.

Screenshot Flash Loader34

Previsuals35 imitates a helicopter.

Screenshot Flash Loader36

A thermometer on the start page of a online shops

Screenshot Flash Loader37

Fueling up, please stand-by.

38

5. Simple loading bars, well presented. Link

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.

39

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

40

Simple, but visually appealing.

41

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

42

This preloader bar grows diagonally.

Screenshot Flash Loader43

Message and hearts on E.G.G.44

Screenshot Flash Loader45

6. Experimental solutions Link

Doesn’t it look familiar to you?

46

This preloader hangs on the rubber.

Screenshot Flash Loader

This preloader shows milestones on the road.

Screenshot Flash Loader47

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.

Screenshot Flash Loader

Numbers jump all over the place.

Screenshot Flash Loader48

The preloading starts with a blurred video.

Screenshot Flash Loader49

A circular preloader from Iran: Mohammad Rahimi

Screenshot Flash Loader

Animated ornaments from Brazil.

Screenshot Flash Loader50

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

Hand-writing on offfice:mac.

Screenshot Flash Loader

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

51

Footnotes Link

  1. 1 http://ff0000.com/
  2. 2 http://ff0000.com/
  3. 3 https://www.smashingmagazine.com/2007/10/30/65-excellent-flash-designs/
  4. 4 http://okaydave.com/
  5. 5 http://www.bernstein-rein.com/
  6. 6 http://www.bernstein-rein.com/
  7. 7 http://food.barba.ru/
  8. 8 http://www.ownyourc.com/
  9. 9 http://sectionseven.com/
  10. 10 http://sectionseven.com/
  11. 11 http://www.weblounge.be/
  12. 12 http://www.ony.ru/#/obrand/
  13. 13 http://www.typographykicksass.com/
  14. 14 http://www.bmf.com.au/
  15. 15 http://www.escriba.es/base_en.html
  16. 16 http://www.escriba.es/base_en.html
  17. 17 http://scruffs-game.com/
  18. 18 http://unlimited.orange.co.uk
  19. 19 http://unlimited.orange.co.uk
  20. 20 http://www.oopsdesign.ca/
  21. 21 http://www.oopsdesign.ca/
  22. 22 http://www.sir-patroclo.com/
  23. 23 http://www.maxshaman.com/
  24. 24 http://www.mousenbrush.com/home.html
  25. 25 http://www.mousenbrush.com/
  26. 26 http://www.kaiserinteractive.com/
  27. 27 http://www.guldsits.se/en/?s=1
  28. 28 http://instinct.ru/flash.html
  29. 29 http://haxxx.alienmelon.com/
  30. 30 http://www.farmrio.com.br/
  31. 31 http://www.farmrio.com.br/
  32. 32 http://www.mariaclaudiacortes.com/colors/Colors.html
  33. 33 http://www.mariaclaudiacortes.com/colors/Colors.html
  34. 34 http://www.mousenbrush.com/
  35. 35 http://www.previsualsdesign.com
  36. 36 http://www.mousenbrush.com/
  37. 37 https://www.loworks-store.org/
  38. 38 http://www.pixelgasoline.com/#
  39. 39 http://www.bajocero.es/
  40. 40 http://www.cubamoon.com/
  41. 41 http://www.screenspro.com/
  42. 42 http://www.converse.de/
  43. 43 http://www.fifastreet.com
  44. 44 http://www.enjoygreenergrass.com/
  45. 45 http://www.enjoygreenergrass.com/
  46. 46 http://whoswestudios.com/flashsite.html
  47. 47 http://www.previsualsdesign.com
  48. 48 http://www.carbonstudio.co.uk/
  49. 49 http://www.infinityart.ro/
  50. 50 http://www.agatha.com.br/
  51. 51 http://www.desudesu.com/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    wow another great post! thanks!

    0
  2. 2

    Wow a huge collection of flash pre-loaders.. Thanks for sharing.

    0
  3. 3

    I cant go without saying that Kaiser Interactive, Scruffs-game, Screenspro, Bajocero worth wasting bandwidth !!!

    0
  4. 4

    I think the simple ones are some of the best. There’s certainly a place for themed loaders, but they usually seem too forced.

    0
  5. 5

    It’s far too easy to waste time on the Red Interactive site!

    0
  6. 6

    I think this is a great list, but I’m just not a fan of flash altogether.

    0
  7. 7

    Some of them are really nice. But I am not like them on web, I always skip the pages which load to long . . .

    0
  8. 8

    oh I’m so confused now… so many great work, I think I’m done with flash…

    0
  9. 9

    Check this one out
    Neostream

    Watch how the pages load, I love it.

    0
  10. 10

    Steven Snell

    March 13, 2008 4:17 pm

    Personally, I’m generally not a fan of flash, but these are some good examples.

    0
  11. 11

    That voodoo doll site (http://www.maxshaman.com/) seems to be malicious. My security shield yields a trojan warning:

    Virus: Trojan-Downloader.JS.Agent.kd

    Virus beim Laden von Web-Inhalten gefunden.

    Adresse: 195.2.253.31

    Can anyone confirm this?

    0
  12. 12

    the one with wings goes too the same site as the turtle one.

    0
  13. 13

    these also are all excellent examples of why flash sucks. who wants to wait for a webpage to load? a game yes, but a webpage with information on it – text and pictures; youre just wasting my time.

    0
  14. 14

    do you like my loading bar .?

    sneev.com

    0
  15. 15

    Waste of bandwith… flash

    0
  16. 16

    Cool article.

    why is it that the anti-Flash brigade always feel the urge to pots.

    I’m not a huge fan of people who make love to pigs… but I don’t purposefully click on articles about said subject and then post my disapproval.

    If you don’t like Flash, don’t click on an article entitled “Showcase Of Creative Flash Preloaders”

    For everyone who hates flash, there is another who loves it (and I have tested sites on over 1000 general website users before for user responses). People like GOOD sites.

    2
  17. 17

    to me, a loading page simply means that you haven’t considered which bit of information you want me to see first, and don’t know how to design for incremental loading.

    does the old web design maxim that “you lose 10% of your audience for every second that you spend loading the page” still hold ?

    0
  18. 18

    I waited for 10 mins on the the first one i clicked on (alienmelon.com). In the end I closed the browser, Nothing is worth waiting that amount of time for!

    0
  19. 19

    I like the one used on the mediazest website – it’s a glass filling with orange juice, fits nicely in with the site theme – http://www.mediazest.com

    0
  20. 20

    all so beautiful

    0

↑ Back to top