Unvealing prettyLoader, a solution aimed to unify ajax loaders.

April 9th 2010

prettyLoader is a small (less than 4kb uncompressed) jQuery plugin that aim at making your life easier regarding ajax loader display.

You know, when you do an ajax call and you never quite know where to position your loader. prettyLoader takes care of that for you, by default, prettyLoader will “hook” to the jQuery ajax function and display a nice spinning circle next to the mouse cursor and hide it once the ajax call is complete, neat no?

You don’t even have to bother calling any additional javascript, prettyLoader takes care of that for you.

Check out the project page for demos and more details.

16 Responses to “Unvealing prettyLoader, a solution aimed to unify ajax loaders.”


  1. […] This post was mentioned on Twitter by pL and Stephane Caron, Paul Milford. Paul Milford said: RT @pluc: OH! That's cool. #jquery #ajax RT @scaron: New jQuery plugin: prettyLoader. A solution aimed to unify ajax loaders. http://bit.ly/d9dtFQ […]

  2. mortal says:

    I have downloaded the prettyloader. everything works except the ajax spinny animation isn’t showing . Do you know what the issue is?

  3. Stephane says:

    @ mortal: Make sure the path to the loader in the settings is right. Looks like the plugin cannot find the loader image.

    Thanks!

  4. Wow sérieusement tu fais une sacré bonne job. Tout tes projets jQuery sont superbe. Content de voir du talent local dans le domaine! Guillaume

  5. Stephane says:

    @Guillaume: Merci! Ca fait encore plus plaisir d’entendre qu’on fait plaisir à du monde local ;)

  6. Joni says:

    The solution you made is quite cool and probably the best ajax load I’ve seen so far. Anyway, I’m having a small problem such that the loader is showing only when I move the mouse. I mean that when I click a link that loads ajax, the loader doesn’t show up if I don’t move the mouse and that isn’t very intuitive. Have done everything from the documentation. Any ideas?

  7. Webouriffant says:

    Hello,
    merci pour ce chouette plugin, très bonne idée.

    J’ai essayé de l’implémenter sur mon blog http://www.webouriffant.com (sur le search)
    mais je rencontre le même souci évoqué plus haut:

    En fait, tant que l’on reste dans la même page, pas de problème tout fonctionne correctement. Mais si le submit appelle une nouvelle page, le ajax-loader.gif ne s’affiche pas! (seulement le background est affiché)

    C’est assez embêtant, car ça limite énormément les possibilités d’utilisation.
    (par exemple sur le Search, j’aimerai simplement que l’anim se lance et soit jouée jusqu’à l’ouverture de la page de résultats).

    Je suis sûr que c’est un tout petit détail lié au hide( );

    merci d’avance si tu parviens à me donner une solution!

    PS: dans ton exemple tu ne présentes que le cas des input buttons, mais ça fonctionne aussi parfaitement avec des liens: Par exemple –> Lien

  8. Kamperprojects says:

    Hey,

    It works perfect nice job. I was looking for something like this thx!

    greetz

  9. Karsten says:

    Hi (^.^)/

    Is there a way to bind prettyLoader only to certain parts of the page?
    Once it is loaded, it hooks to all ajax events (which is a feature).

    Greetings
    Karsten

  10. Karsten says:

    Wohoo.. reading docs helps ;-)

    init prettyLoader without the ajax hook:
    $.prettyLoader({
    bind_to_ajax: false
    });

    and then use the API functions:
    $.prettyLoader.show();
    $.prettyLoader.hide();

  11. Sylvio says:

    Joni : I had the same problem, it is not a plugin bug. Check that you don’t have a click event binded function with a “return false”.

  12. Evan says:

    In Firefox, the loader keeps popping up in the absolute upper left hand corner of the screen. Where it would be if it were positioned absolutely at top:0, left:0. Once i move the cursor, it shows up next to the cursor where it belongs. I am using the default offset parameters.

    Any ideas?

  13. Nate Irwin says:

    Yep, same problem in Firefox with me. I did a bit of digging, and it seems like the initial position of the loader is not set (at all, no left or top position set) until the cursor is moved. I tried hacking and calling .setPosition() inside .show(), but wasn’t easily able to workaround the issue.

    I’ll likely take a more in depth look at the problem here when I get some more time, but for now this is a no go for my project.

    Cool implementation, though!

  14. Nate Irwin says:

    Okay, I was able to workaround the problem by passing clientX and clientY coordinates into .show() and then passing them onto .positionLoader(), which I call after the prettyLoader is appended to the page. .positionLoader() only uses these manually passed-in coordinates when the event object (e) is undefined.

    Sounds like a bit of a hack (because it is!). I’m sure there is a better solution, but I’m in a bit of a hurry, so I’ll take it for now.

  15. NEX-C3 says:

    Ce blog est formidable. Il ya souvent toutes les informations appropriées au suggestions de mes doigts. Merci et à maintenir en place le travail de qualité supérieure!

  16. Ajax loaders says:

    Nice one, but I think loading animations in image format will be more widely used in ajax loaders share of the market. Anyway – thanks for the link

Leave a Reply