Image Loading Animation Plugin with jQuery and CSS3 - LoadGo

Image Loading Animation Plugin with jQuery and CSS3 - LoadGo
File Size: 27.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

LoadGo is a jQuery plugin which creates a CSS3 animated overlay on your image to make it transparent and fill with color relative to a percentage value. Great for creating an amazing loading animation to indicate the progress information using your own images (e.g. logo).

Basic usage:

1. Include the latest version of jQuery library and the jQuery loadGo plugin on the web page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="loadgo.js"></script> 

2. Add a PNG image into your web page.

<img id="demo" src="logo.png" alt="Demo">

3. Call the fucntion on the image.

$('#demo').loadgo();

4. Plugin's default options.

//  Overlay color
bgcolor: '#FFFFFF',        

//  Overlay opacity    
opacity: '0.5', 

//  Overlay smooth animation when setting progress               
animated: true,       

//  Overlay image
image: null,   

//  Overlay CSS class          
class: null,

// Resize functions
resize: null,

// Direction animation
// 'left to right', 'right to left', 'bottom to top' or 'top to bottom'        
direction: 'lr',

// Image filter (optional)
filter: null

5. Public methods.

// sets progress number to loading overlay. 
$('#demo').loadgo('setprogress', 30);

// sets progress to zero automatically.
$('#demo').loadgo('resetprogress');

// returns current progress.
$('#demo').loadgo('getprogress');

// stops the loop and shows the full image.
$('#demo').loadgo('stop');

// sets overlay to loop indefinitely until stopped. 
$('#logo').loadgo('loop', 10);

Change logs:

2015-11-02

  • Fix for $ is undefined on some jQuery newer versions.

2015-09-30

  • Filter option using CSS3 filter property

2015-08-06

  • Added new option 'direction' for setting animation direction. 

2015-07-12

  • Resize function added. Also, 'resize' parameter included so users can use their own resize functions. Overlay now has an empty CSS class called 'loadgo-overlay'.

2015-06-24

  • added loop and stop methods.

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