Showcase Of Creative Flash Preloaders

Advertisement

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.

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.

Screenshot Flash Loader4

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

Screenshot5

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

Screenshot Flash Loader7

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

Screenshot Flash Loader

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

Screenshot8

The “C” is being filled up.

Screenshot9

This preloader grows vertically: Section Seven10

Screenshot Flash Loader11

2. Typography in use.

Very elegant preloader with big typo.

Screenshot12

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

Screenshot13

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

Screenshot14

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

Screenshot Flash Loader15

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.

16

3. Mascots, Cartoons & Co.

A huge round theme by a Spanish bakery17.

Screenshot Flash Loader18

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

Screenshot19

On Orange20 bees are collecting honey…

Screenshot Flash Loader21

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

Screenshot Flash Loader23

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

Screenshot Flash Loader24

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

25

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

Screenshot Flash Loader27

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.

Screenshot28

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

Screenshot29

Two obscure measuring devices.

Screenshot Flash Loader30

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

Screenshot Flash Loader31

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.

32

This loader is a part of splash page: Farm33

Screenshot Flash Loader34

Color in Motion35 thanks for the patience.

Screenshot Flash Loader36

An old-style mechanism in use.

Screenshot37

This one flies all over the screen.

Screenshot Flash Loader38

Previsuals39 imitates a helicopter.

Screenshot Flash Loader40

A thermometer on the start page of a online shops

Screenshot Flash Loader41

Fueling up, please stand-by.

42

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.

43

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

44

Simple, but visually appealing.

45

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

46

This preloader bar grows diagonally.

Screenshot Flash Loader47

Message and hearts on E.G.G.48

Screenshot Flash Loader49

6. Experimental solutions

Doesn’t it look familiar to you?

50

This preloader hangs on the rubber.

Screenshot Flash Loader51

This preloader shows milestones on the road.

Screenshot Flash Loader52

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

Screenshot Flash Loader54

Numbers jump all over the place.

Screenshot Flash Loader55

The preloading starts with a blurred video.

Screenshot Flash Loader56

A circular preloader from Iran: Mohammad Rahimi57

Screenshot Flash Loader58

Animated ornaments from Brazil.

Screenshot Flash Loader59

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

Screenshot Flash Loader60

Hand-writing on offfice:mac61.

Screenshot Flash Loader62

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

63

Footnotes

  1. 1 http://ff0000.com/
  2. 2 http://ff0000.com/
  3. 3 http://www.smashingmagazine.com/2007/10/30/65-excellent-flash-designs/
  4. 4 http://www.oddodesign.com/
  5. 5 http://okaydave.com/
  6. 6 http://www.bernstein-rein.com/
  7. 7 http://www.bernstein-rein.com/
  8. 8 http://food.barba.ru/
  9. 9 http://www.ownyourc.com/
  10. 10 http://sectionseven.com/
  11. 11 http://sectionseven.com/
  12. 12 http://www.weblounge.be/
  13. 13 http://www.victory-sa.com/
  14. 14 http://www.ony.ru/#/obrand/
  15. 15 http://www.typographykicksass.com/
  16. 16 http://www.bmf.com.au/
  17. 17 http://www.escriba.es/base_en.html
  18. 18 http://www.escriba.es/base_en.html
  19. 19 http://scruffs-game.com/
  20. 20 http://unlimited.orange.co.uk
  21. 21 http://unlimited.orange.co.uk
  22. 22 http://www.oopsdesign.ca/
  23. 23 http://www.oopsdesign.ca/
  24. 24 http://www.sir-patroclo.com/
  25. 25 http://www.maxshaman.com/
  26. 26 http://www.mousenbrush.com/home.html
  27. 27 http://www.mousenbrush.com/
  28. 28 http://www.kaiserinteractive.com/
  29. 29 http://www.guldsits.se/en/?s=1
  30. 30 http://instinct.ru/flash.html
  31. 31 http://gothikamovie.warnerbros.com
  32. 32 http://haxxx.alienmelon.com/
  33. 33 http://www.farmrio.com.br/
  34. 34 http://www.farmrio.com.br/
  35. 35 http://www.mariaclaudiacortes.com/colors/Colors.html
  36. 36 http://www.mariaclaudiacortes.com/colors/Colors.html
  37. 37 http://design.bit-creative.com/
  38. 38 http://www.mousenbrush.com/
  39. 39 http://www.previsualsdesign.com
  40. 40 http://www.mousenbrush.com/
  41. 41 https://www.loworks-store.org/
  42. 42 http://www.pixelgasoline.com/#
  43. 43 http://www.bajocero.es/
  44. 44 http://www.cubamoon.com/
  45. 45 http://www.screenspro.com/
  46. 46 http://www.converse.de/
  47. 47 http://www.fifastreet.com
  48. 48 http://www.enjoygreenergrass.com/
  49. 49 http://www.enjoygreenergrass.com/
  50. 50 http://whoswestudios.com/flashsite.html
  51. 51 http://eie.pushlabs.ca/
  52. 52 http://www.previsualsdesign.com
  53. 53 http://www.problemplayground.com/
  54. 54 http://www.problemplayground.com/
  55. 55 http://www.carbonstudio.co.uk/
  56. 56 http://www.infinityart.ro/
  57. 57 http://mohammad.amrdesign.ir/flash.htm
  58. 58 http://mohammad.amrdesign.ir/flash.htm
  59. 59 http://www.agatha.com.br/
  60. 60 http://www.sonypictures.com/movies/onceuponatimeinmexico/site/mexico.html
  61. 61 http://simplifyyourwork2008.com/
  62. 62 http://simplifyyourwork2008.com/
  63. 63 http://www.desudesu.com/

↑ Back to topShare on Twitter

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 and loves solving complex problems in large companies. Get in touch.

Advertising
  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

    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

    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
  17. 17

    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
  18. 18

    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
  19. 19

    all so beautiful

    0
  20. 20

    Most of these preloaders are bad from the standpoint that they alone weigh more than a banner ad. The point of a preloader is to inform users that the site is loading if they don’t have high bandwidth. After 20 seconds at 56K dial up users will abandon the site because they don’t even see the preloader yet. I’d love to see the abandonment rates for these sites, but you’ll also notice that none of them are enterprise level companies. If you design a preloader like this for a client, you are doing them a huge disservice.

    0
  21. 21

    These are great. I’ve often felt people could be more creative in these than just a progress bar. I always thought it would be cool to show a race track and having cars racing around the track with the checkered flag coming down when the winning car crosses the finish line at 100% complete. Just an idea if anyone wants ot use it!

    0
  22. 22

    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.

    1
  23. 23

    My god, all these guys trying to show their own loader / whatever… That’s sad.

    And those who say flash = waste of bandwidth… Or those like Paul Fox still talk about users in 56k… It makes me laugh. Do you _really_ think those designers care about ppl in 56k? Come on. We don’t give a fuck of people still using 56k coz they’re not our target. When you’re driving a bike you don’t use the high way, when you’re designing a highway you’re not thinking “hey, what if a biker use it?”. It’s the same here. And stop talking about business or entreprise level whatever. I know a lot of people doing more money with a kick ass flash site than people suit&tie with a loosy designed HTML website. By the way, I’ve seen a site in the list, from a small company called Orange.

    I guess it is an attempt of self conviction, your job is boring because you know how to do it better. Sorry bud, but we can work well with nice animated graphics. And have fun, in the same time.

    2
  24. 24

    Well I think this http://mohammad.amrdesign.ir/flash.htm, is not so creative. It is a template!!!!….from templatemonter,com.

    The example is good, but is a template. And this person says is a designer.

    0
  25. 25

    @ all the ones being showcased ; good job!
    @ Laren (March 14th, 2008, 5:46 pm) ; who are you to judge a fellow designer so negatively. Most designers use templates
    for inspiration and/or for their own learningcurve. You sound like you are being born as a webdesigner and look down on other trying to survive. Also while you were slamming this guy note that your grammer skills lacks basic stucture so please consider that next time

    0
  26. 26

    @ali-paul; No one born as a designer, all of us learn from the templates and the websites already designed. But one thing is learn from them and other is copy them .

    If that designer is starting, the best thing to learn is make his own design, not copying or using others design. I never advise someone to copy a site, I always said that look a lot of them and make his own.

    Also no one born as a bilingue…my first language is spanish, I’m trying to do my best writing here but this is my opinion; “not a copy from other person”.

    0
  27. 27

    Yaa ! free stuff makes a user to download even if he/she don’t want that software. I would like to download free ware than that of shareware.

    0
  28. 28

    hey, I’ve got a great idea for one of your post – a showcase of splash pages!
    obsolete technology from the 90′s is so great!

    seriously, if your site needs a loading bar, you should rebuild your site, not try to dress up a turd in the first frame.

    0
  29. 29

    well Adam, the thing is with people like you…. you dislike Flash but you probably also don’t know how to use Flash. Most good Flash designers can create a beautiful html site too… who is in the better position within the industry?

    I love xhtml, css etc but if a client is dead set on a flash site, at least I am in a position to offer it… rather than telling them “oh, i dislike flash so will turn down your $50k project”

    2
  30. 30

    the loaders are really cool !
    How to build them ?
    where can I get the resources ???

    0
  31. 31

    woo…

    this is too nice..

    thank you

    and happy new year (Iranians)

    0
  32. 32

    what about interactive loading ??
    I find it much more interesting and less boring

    0
  33. 33

    Recently I changed my site to flash, I believe that the loading it fits in these terms. What think? http://www.pedrolamin.com.br

    0
  34. 34

    I think we all should save web-capacity… flash is a good way to go for that.

    0
  35. 35

    The samples are amazing and so are the sites. It’s definately inspiring to see.
    Seeing this work just makes me want to keep learning flash and creating my
    own visions.

    0
  36. 36

    The samples are amazing and so are the sites. It’s definately inspiring to see.
    Seeing this work just makes me want to keep learning flash and creating my
    own visions. SoTHANK YOU for that.

    0
  37. 37

    COOL LOADERS !!!! AWESOME !!! ALL the LOSERS n commenting bocz they can’t do it !!!!!!!
    It’l like the Old story of “the GRAPES are SOUR “

    0
  38. 38

    really nice collection of creative loaders!!

    0
  39. 39

    I’m trying to do my best writing here but this is my opinion
    If your site needs a loading bar,free stuff makes a user to download even if he/she don’t want that software. I would like to download free ware than that of shareware.

    0
  40. 40

    Well, i was just looking for some templates and found it interactive, good job guys. Soon you will see mine

    cheers !!

    Preserve the Planet …

    0
  41. 41

    The preloader of Carbonstudio is very cool & original. Great programmers, I think pouah !!!

    0
  42. 42

    Why do people bag out flash sites and preloaders? I would rather have the full site load in one hit than wait for each page to load. All the above sites are simply amazing. I just wish I was that good. If you ask me flash is the best way to go. I’ll spend all day playing around looking at flash sites, normal html ones suck. So if you ask me….If you are saying they are bad because you have to wait for them to load. Well spend up and get broadband for starters (it doesn’t cost that much). Try and learn flash. Then you will see what true talent it takes to make it all work. And finally, Just because you can’t do it, doesn’t mean it’s bad. Expand your mind and try to learn something new instead of leaving bad comments on things you can’t even do

    1
  43. 43

    Guys, The preloaders are a necessity. People need to be entertained while they wait or you will lose them. There is nothing more boring than a static page loaded with a bunch of html links and news. The truth is the more you can say with pictures and animation the more effective you are and there is no denying it. Billboards are one of the the most used forms of communication and they work. Very few words. You want to get someone to engage in your site. use no words at all. If your that good, you are on your way. I understand all you guys that think you need to have all the information on the homepage with tons of copy and links but honestly too much information is just as bad as none. You want a good example of an effective site look at http://www.apple.com Yeah I know they don’t use much flash if any but for designers that are not Java scripting geniuses Flash is a great way to produce effective websites and advertising. It allows you to be creative and still maintain functionality. Besides I much prefer to be entertained by a cute loader than to stare at a white screen and wonder if I lost my connection.

    0
  44. 44

    Well Creative Studios, Portfolios and Media companies dont really have to worry about the same things as eBay or amazon.

    To say that these companies will lose customers due to preloading is simply ignorant of an industry.

    -1
  45. 45

    PS, who’s the editor for this post? Cause the English is appauling …

    0
    • 46

      I love people who correct other people and commit the same mistake they are complaining about.

      It is “appalling” not “appauling”. As in “your hypocrisy is appalling.”

      Not to mention, “dont” has an apostrophe in it. You don’t start a sentence with “Cause” if you are using it as “because”. There should have been a comma after “Well” in the first sentence, etc.

      Unless of course, you were expecting the editor to edit your post because your use of English grammar is appalling.

      0
  46. 47

    Hello
    I must say …brilliant post! The examples of Flash preloaders and sites are amazing!
    I’m an animator/ designer who’s been teaching myself a bit of flash over the last couple of months. I recently put my website in which I designed and built a simple preloader …please take a look: http://www.priyamistry.co.uk
    Hope you guys like it :]

    0
  47. 48

    Adrian Sanoguel

    June 25, 2009 8:37 am

    Wow. Great collection!
    I just wanted to add this really cool link of hot Flash preloaders Pretty Loaded

    0
  48. 49

    Andrian is right. prettyloaded.com is a great gallery of entertaining preloaders… not just screenshots

    0
  49. 50

    funny thing. each showcase of creative flash preloaders starts from the oddodesign one. But i’ll agree it’s the best flash component i’ve seen.

    0
  50. 51

    Does anybody know what font was used for the “Twenty Nine” one? Or if you know of a similar font could you let me know? Thanks!

    0
  51. 52

    Pradip Jani {art-guru}

    February 17, 2010 5:50 am

    Hey!
    really cool collection of creative loaders,

    great…!!!

    0
  52. 53

    NICE :D

    0
  53. 54

    can anyone teach me a acode of preloader?? coz my preloader gets stucked

    -1

↑ Back to top