loading.js

14 Aug 2012

I've been using this library for a year. It serves me well.

Maybe it might benefit you, too.

Here is the trivial problem, when you are build a webpage:

When a user clicks on a submit button in order to submit a form, How would you show a loading image? Next to the button? inside the button?

I've decided that the loading image should be shown within the button, and the label is erased, because the user won't be able to re-click it until that loading image disappears.

If there is an error, I show the error message, remove the loading image, and bring back the label of the button.

I've write a simple script to do just that:

You can invoke `$(button).loading_button(true);in order to show the loading image, and you can invoke ``$(button).loading_button(false);``` in order to bring it back to the normal state.

I've also made it work with icons and textboxes. Please see the below demo.

The catch is your button must be a SPAN (or DIV) element.

Anyway, what I like about it is the elegance. Your code will be really compact.

Github Repo

Loading.js

Compatibility

  • Firefox
  • Chrome
  • Safari
  • IE8 (other IEs haven't been tested against)

Demo

<span> <span id=“test_button” class=“button” onclick=“$(this).loading_button(true);“>Click Me</span> <a href=“#” onclick=“$('#test_button').loading_button(false);return false;“>Stop loading</a> <br/><br/> <input id=“test_textbox” type=“text” value=“Hello”> <a href=“#” onclick=“$('#test_textbox').loading_textbox(true);return false;“>Start</a>, <a href=“#” onclick=“$('#test_textbox').loading_textbox(false);return false;“>Stop</a> <br/><br/> <span id=“test_icon” style=“display: inline-block;width: 28px;height: 28px;background-image: url('/assets/delete_icon.png');“></span> <a href=“#” onclick=“$('#test_icon').loading_icon(true);return false;“>Start</a>, <a href=“#” onclick=“$('#test_icon').loading_icon(false);return false;“>Stop</a> <br/><br/> </span>

Here is the source code:

<span> <span id="test_button" class="button" onclick="$(this).loading_button(true);">Click Me</span> <a href="#" onclick="$('#test_button').loading_button(false);return false;">Stop loading</a> <br/><br/> <input id="test_textbox" type="text" value="Hello"> <a href="#" onclick="$('#test_textbox').loading_textbox(true);return false;">Start</a>, <a href="#" onclick="$('#test_textbox').loading_textbox(false);return false;">Stop</a> <br/><br/> <span id="test_icon" style="display: inline-block;width: 28px;height: 28px;background-image: url('/assets/delete_icon.png');"></span> <a href="#" onclick="$('#test_icon').loading_icon(true);return false;">Start</a>, <a href="#" onclick="$('#test_icon').loading_icon(false);return false;">Stop</a> <br/><br/> </span>

Give it a kudos