JQUERY SHOWLOADING PLUGIN

I found on the internet when trying to search keyword ‘Show loading’ and see a nice plugin jQuery. This plugin is designed to show a loading graphic over a specific area of the screen (e.g. a specific <div>) while an ajax request is running.

 View Demo

Example script:

   1:  jQuery(document).ready(

   2:         function() {

   3:   

   4:           //

   5:           // When a user clicks the 'loading-default' link,

   6:           // call showLoading on the activity pane

   7:           // with default options

   8:           //

   9:           jQuery('a.loading-default').click(

  10:   

  11:             function() {

  12:                 jQuery('#activity_pane').showLoading();

  13:             }

  14:   

  15:           );

  16:   

  17:           //

  18:           // When a user clicks the 'loading-ajax' link,

  19:           // call showLoading before performing the 'load'

  20:           //

  21:           jQuery('a.load-ajax').click(

  22:   

  23:             function() {

  24:                 jQuery('#activity_pane').showLoading();

  25:                 jQuery('#activity_pane').load( '/some/url',

  26:                      function() {

  27:                            // callback fires after ajax load completes

  28:                            jQuery('#activity_pane').hideLoading();

  29:                     }

  30:                 );

  31:             }

  32:   

  33:           );

  34:   

  35:           //

  36:           // When a user clicks the 'loading-bars' link,

  37:           // call showLoading with addClass specified

  38:           //

  39:           jQuery('a.loading-bars').click(

  40:   

  41:             function() {

  42:                 jQuery('#activity_pane').showLoading(

  43:                   {

  44:                     'addClass': 'loading-indicator-bars'

  45:                                                }

  46:                 );

  47:             }

  48:   

  49:           );

  50:   

  51:           //

  52:           // When a user clicks the 'loading-hide' link,

  53:           // call hideLoading on the activity pane

  54:           //

  55:           jQuery('a.loading-hide').click(

  56:   

  57:             function() {

  58:                 jQuery('#activity_pane').hideLoading();

  59:             }

  60:   

  61:           );

  62:   

  63:         }

  64:   

  65:     );

 

Css Style:

   1:  .loading-indicator {

   2:      height: 80px;

   3:      width: 80px;

   4:      background: url( '../images/loading.gif' );

   5:      background-repeat: no-repeat;

   6:      background-position: center center;

   7:  }

   8:   

   9:  .loading-indicator-overlay {

  10:      background-color: #FFFFFF;

  11:      opacity: 0.6;

  12:      filter: alpha(opacity = 60);

  13:  }

 

js Source:

jquery.showLoading

 

How to use:

   1:   

   2:  <script type="text/javascript">

   3:       $('#info1 a').click(function(){

   4:          if ($("#form1").valid())

   5:          {

   6:              $("#info1").showLoading();

   7:              $.post(url,{id: 'Johnson'}, function(d,s){

   8:                  if (d.status){

   9:                      //do something

  10:                  }else{

  11:                      show_message_dialog(d.data);

  12:                  }

  13:                  $("#info1").hideLoading();

  14:              }, 'json');

  15:          }

  16:          return false;

  17:      });

  18:      

  19:      //the same with #info2,  #info3

  20:  </script>

  21:   

  22:   

  23:  <div id="info1" style="position: relative">

  24:      <a href="#">Click me</a>

  25:      <!-- form data submit.. -->

  26:  </div>

  27:  <div id="info2" style="position: relative">

  28:      <a href="#">Click me</a>

  29:      <!-- form data submit.. -->

  30:  </div>

  31:  <div id="info3" style="position: relative"

  32:      &lt;a href="#">Click me</a>

  33:      <!-- form data submit.. -->

  34:  </div>

Can be add more style loading use:

   1:  jQuery('#activity_pane').showLoading(

   2:   {

   3:         'addClass': 'loading-indicator-bars'                                

   4:   }

css style

   1:  .loading-indicator-bars {

   2:          background-image: url('images/loading-bars.gif');

   3:          width: 150px;

   4:      }

Categories: jQuery , Plugin jQuery

If You Enjoyed This Post Please Take 5 Seconds To Share It.