Basic Loading Indicator Plugin With jQuery - Wload.js

Wload.js is a really small, cross-browser jQuery loading indicator plugin which displays a loading screen with custom loading spinner and loading text on the screen, intended for use during AJAX requests.

How to use it:

1. Link to jQuery JavaScript library and the jQuery Wload.js plugin's files:

<link rel="stylesheet" href="css/jquery.Wload.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.Wload.js"></script>

2. The JavaScript to show a default loading indicator on the screen.

$(function(){
  $('body').Wload()
})

3. Customize the loading text displayed next to the loading spinner.

$(function(){
  $('body').Wload({
    text:'Loading'
  })
})

4. Show the loading indicator in a specific container.

<div class="dom"></div>

$(function(){
  $('body').Wload({
    el: '.dom'
  })
})

5. To close the loading indicator manually:

$(function(){
  $('body').Wload('hide')
})

6. Or close the loading indicator automatically:

$(function(){
  $('body').Wload('hide',{
    time:3000 // auto close after 3 seconds
  })
})

7. To override the default loading spinner:

.w_load_icon{
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(../images/w_load.gif) no-repeat;
}

8. To override the default styles of the loading screen:

.w_load_body{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(233, 233, 232, 0.5);
}

---

This awesome jQuery plugin is developed by onfuns. For more Advanced Usages, please check the demo page or visit the official website.