JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 0/5 ( 0 votes)
Your Rating:
jQuery Loading is a jquery plugin that easily add and manipulate loading states of any element on the page. It does that by adding an overlay on top of the loading element.
Source: carlosbonetti.github.io
1. INCLUDE JS FILES
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="jquery.loading.js"></script>
2. HTML
<div id="loading-always" class="loading-div"> This div is always loading </div>
3. JAVASCRIPT
$('#loading-always').loading();
4. OPTIONS
| Option | Default value | Comments |
|---|---|---|
| message | Loading... | Message to be rendered on the overlay content |
| theme | light | Theme to be used for the overlay element. If this options is set to, e.g., whatever then the class .loading-theme-whateverwill be applied to the overlay element |
| stoppable | false | Setting this option to true will make the loading state be stopped if the overlay element is clicked by the user. This option does not override the onClick option |
| onStart | loading.overlay.fadeIn(150) | Function to be executed when the loading state is started. Receives the loading object as parameter |
| onStop | loading.overlay.fadeOut(150) | Function to be executed when the loading state is stopped. Receives the loading object as parameter |
| onClick | - | Function to be executed when the overlay is clicked. Receives the loading object as parameter |
5. METHODS
| Method | Description | Example |
|---|---|---|
| resize | Recalculate and apply new dimensions and position to the overlay, based on the state of the target element. Call this method if the the overlay is not being shown on the right position and/or dimensions. | $(...).loading('resize') |
| start | Turn on the loading state of some element and trigger theloading.start event. | $(...).loading('start') |
| stop | Turn off the loading state of some element and trigger theloading.stop event. | $(...).loading('stop') |
| toggle | Turn on or off the loading state of some element, depending of the current state, and trigger the respective event. | $(...).loading('toggle') |
| $.Loading.setDefaults | Extend the Loading plugin default options | $.Loading.setDefaults({ theme: 'blurred', message: 'Loadingdingdingding' }) |
