ajax-loading-animation

a simple ajax loading animation for jquery and Zepto Demo

Simple Usage

must include jQuery or Zepto file and ajax-loading.js

<script src="/path/to/ajax-loading.js"></script>
<script type="text/javascript">
  //init: automatic monitoring ajax events
  var loading = $.loading();

  //enable and disable listening ajax events
  loading.ajax(true);//enable
  loading.ajax(false);//disable

  //manual show the loading view
  loading.open();//not close
  loading.open(1000);//auto close view after 1 seconds

  //manual close the loading view
  loading.close();

</script>

More

<script type="text/javascript">
   //init
   $.loading({
        //wrap div
        //set the loading html wrap tag id
        id         : 'ajaxLoading',
        //wrap tag z-index
        zIndex     : '1000',
        //wrap tag background
        background : 'rgba(0, 0, 0, 0.7)',
        //min show time
        minTime    : 200,
        //wrap tag border-radius
        radius     : '4px',
        //wrap width
        width      : '85px',
        height     : '85px',

        //loading img/gif
        imgPath    : '/assets/img/img.gif',
        imgWidth   : '45px',
        imgHeight  : '45px',

        //loading text
        tip        : 'loading...',
        //text font size
        fontSize   : '14px',
        //text font color
        fontColor  : '#fff'
   });
</script>