Add a preloader to your Muse web pages

Add a preloader to your Muse web pages

I’ve published several videos about Adobe Muse on my Youtube channel. This is where I received te following question: “How can I add a preloader on a Muse web page?”. I’m not a fan of preloaders on web pages, but as Adobe Muse lets you create richer animations, I understand that in some cases, before telling a story, you want to make sure that all the elements are loaded.

This is the case with the beautiful “Year in Review” experience by Spotify: https://www.spotify.com/us/2013/, or the “Merry Christmallax” animation: http://ihatetomatoes.net/merry-christmallax/

You can see my preloader in action here: http://mchaize.businesscatalyst.com/inspire.html

preloader-screenshot

Add a preloader, with a custom spinner, to any Adobe Muse page.

How to install my preloader

I submitted my widget to the Adobe Muse Exchange website yesterday. It should be available very soon. The Muse Exchange website lists all the widgets and libraries created by the community. I explain in my previous post how you can create your own library and share it on this website.

You can download my widget here: http://creativedroplets.com/samples/adobemuse/preloader.mulib

Once on your desktop, double-click on it. It will launch Adobe Muse and add my widget in the Library panel:

panel-library

How to use it

You can decide on which page you want to add a preloader, but don’t add it on a classic web page. A preloader can be frustrating for the user. A web page loads its content on the fly so that the visitor can start reading content as soon as the page starts loading. But if you plan to tell a story with several heavy assets, your visitor can understand that you need to load everything before starting the experience.

  1. Open the page in Adobe Muse.
  2. Create a layer on top of all other layers. Make sure that the top layer is selected.
  3. Open the Library panel.
  4. Drag and drop the “preloader” widget anywhere on the page.

Then, you can set some properties:

 

properties2

Click the blue icon to display the Preloader Options

The preloader is composed of a text message and a spinner. You can set the “Message” you want to display and the “Font color”. The Background color will set the color of a fullscreen element that you can make transparent by playing with the “Opacity” option: 0 will make it fully transparent, 1 fully opaque.

That’s it. Publish your page and you’ll see the preloader.

The source code of my widget

My widget is based on the work of Niklaus Gerber: Preloadme. It’s a lightweight preloader powered by jQuery and CSS. To display a spinner, Niklaus uses an animated GIF. This is something I had to modify as I cannot embed an image in my widget. CSSload is a website that generates animated spinners using CSS: http://cssload.net/

The source code is available on GitHubhttps://github.com/michaelchaize/MuCow/blob/master/preloader.mucow

Notes for MuCow developers:

The Preloadme code from Niklaus is based on jQuery. Adobe Muse also uses jQuery to run the widgets. You don’t have to load your version of jQuery. To use the one loaded by Muse, place your code in the <bodyEndHTML> section of the MuCow. This way, you know that the jQuery framework is already loaded.

Questions ? Ideas ?

If you have questions, don’t hesitate to comment this post. You can also contact me on twitter: http://twitter.com/mchaize

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

13 Comments

  1. I’ve tried this widget on my website. It works well but introduces a horizontal scroll on the page. Any solution?

    • Can you send me a link to your page ? And share with me your configuration ? (OS, browser…)

      • HI Michael,
        look your Preload in our web!
        from Argentina, saludos.

        • @Santiago Ponti: Ha nice !

  2. Hi. Awesome widget, but I am having the same issue as Somya Saxena. It seems to be introducing a horizontal scroll.. on my computer anyways. Oddly enough it seems to go away when I resize the window. I asked my friend to test it and he is not getting the horizontal scroll on his lap top, which also seems odd.

  3. Awesome feature! I hated the fact that people would miss the saw animation at the top of my page because it wouldn’t load fast enough! Is there any possibility of different pre-loader styles in the near future? I would love to be able to customize a bit more (perhaps the font, and css pre-loader image). It would definitely be something I would be willing to spend money on. I can’t wait to see what you come up with next!

  4. Very nice work! But I have little problem, on my page http://www.virgohaan.com/kassid, there is quite long animation out of several hundreds of images and it would be nice if preloader would load all the images before its ready but unfortunately it does not load all the images so the animation shows quite jumpy.

    All the best
    Virgo

  5. Hey!
    Its a really great tool, but I have the following problem:
    Clickable elements(like links, menus, etc) become unclickable/unactivatable under the widget. Any idea how to solve it?
    I used it on a new (top) layer like you wrote.
    Thanks in advance

  6. Hi! I’m trying to know how to create my own preloader, I mean, create my own animation and use it as a preloader in my webpage, can you do some tutorial of how to do that? or do you know any page where I can find that information?

    thnx.

  7. Hello Michael, thanks a lot for this.

    One question, where can I replace the spinning wheel with another gif animation?

    thanks!

  8. Hi Michael, is there any chance to configure size and font type for the message? Many Thanks!

    Diego

  9. Hi Michael,

    when using your Add-on some of the 100% width items doesn´t display correctly.

    Many thanks for your help!

    Diego

Submit a Comment

Your email address will not be published. Required fields are marked *