Image Loading Animation Plugin with jQuery and CSS3 - LoadGo

LoadGo is a jQuery/JavaScript 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.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 to customize the loading animation.

//  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. API 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);

// gets options
$('#logo').loadgo('options');

// sets options
$('#logo').loadgo('options', {/* options here */});

// destroy the instance
$('#logo').loadgo('destroy');

Changelog:

v2.2.1 (2019-11-10)

• Code style
• Javascript: setProgress method now checks if element exists.
• Added Gruntfile.
• Fixed Javascript examples.

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.