Image Loading Animation Plugin in JavaScript - LoadGo

LoadGo is a jQuery/JavaScript plugin that 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. Install and import LoadGo into your project.

# NPM
$ npm install loadgo

// Vanilla JavaScript
// window.Loadgo
import 'loadgo'
 is now available

// jQuery plugin (jQuery 4+):
// $.fn.loadgo
import 'loadgo/jquery'

2. Or download the package and load the loadGo plugin directly in your HTML document.

<!-- Vanilla JavaScript Vanilla JavaScript -->
<script src="/?originalUrl=https%3A%2F%2Fwww.jqueryscript.net%2F%26quot%3B%2Fpath%2Fto%2Floadgo-vanilla.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3B!--%2520jQuery%2520plugin%2520(jQuery%25204%2B)%3A%2520--%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3B%2Fpath%2Fto%2Fjquery.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3B%2Fpath%2Fto%2Floadgo.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fpre">
3. Add a PNG image into your web page.
<img id="demo" src="/?originalUrl=https%3A%2F%2Fwww.jqueryscript.net%2F%26quot%3Blogo.png%26quot%3B%2520alt%3D%26quot%3BDemo%26quot%3B%26gt%3B%253C%2Fpre">
4. Call the fucntion on the image.
// Vanilla JavaScript
Loadgo.init(document.getElementById('demo'), {
  // options here
});

// jQuery plugin (jQuery 4+)
$('#demo').loadgo({
  // options here
});

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,
animationDuration: 0.6,
animationEasing: 'ease',

// Overlay image
image: null,   

// Overlay CSS class          
class: null,

// Resize functions
resize: null,

// Direction animation
// lr (left→right), rl (right→left), bt (bottom→top), tb (top→bottom)    
direction: 'lr',

// Image filter (optional)
// Values: blur, grayscale, sepia, hue-rotate, invert, opacity
filter: null,

// Callback invoked after every setprogress call
onProgress: (progress) => {
  document.getElementById('counter').textContent = `${progress}%`
},

// Text for the aria-label attribute
ariaLabel: 'Loading'
5. API methods.
// sets progress number to loading overlay. 
$('#demo').loadgo('setprogress', 30);
// Vanilla JavaScript
Loadgo.setprogress(document.getElementById('demo'), 30);

// sets progress to zero automatically.
$('#demo').loadgo('resetprogress');
// Vanilla JavaScript
Loadgo.resetprogress(document.getElementById('demo'));

// returns current progress.
$('#demo').loadgo('getprogress');
// Vanilla JavaScript
Loadgo.getprogress(document.getElementById('demo'));

// stops the loop and shows the full image.
$('#demo').loadgo('stop');
// Vanilla JavaScript
Loadgo.stop(document.getElementById('demo'));

// sets overlay to loop indefinitely until stopped. 
$('#demo').loadgo('loop', 10);
// Vanilla JavaScript
Loadgo.loop(document.getElementById('demo'), 10);

// gets options
$('#demo').loadgo('options');
// Vanilla JavaScript
Loadgo.options(document.getElementById('demo'));  

// sets options
$('#demo').loadgo('options', {/* options here */});
// Vanilla JavaScript
Loadgo.options(document.getElementById('demo'), {/* options here */});

// destroy the instance
$('#demo').loadgo('destroy');
// Vanilla JavaScript
Loadgo.destroy(document.getElementById('demo'));

Changelog:
v3.1.2 (2026-03-27)

    
Bugfixes

v3.1.0 (2026-03-26)

    
Added more options
    
Improved ARIA accessibility
    
Fixed bugs

v3.0.0 (2026-03-24)

    
Dropped jQuery < 4 support; updated for jQuery 4 breaking changes
    
Released pure JavaScript version as the primary no-dependency alternative.
    
Removed Bower support.
    
Migrated source to ES6+: const/let, arrow functions, template literals, spread operator.
    
Added ESLint (flat config), Prettier, Husky, lint-staged, and commitlint.
    
Removed IE-specific code and polyfills.
    
Migrated tests from browser-based Mocha to CLI-based Vitest + jsdom (npm test).
    
Fixed bugs in destroy (incorrect splice call and wrong argument to removeChild), loop, and stop methods.

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.





Prev: jQuery Plugin For Built-In Loading Indicator In Buttons - Button Loader 
Next: SVG Based Circular Progress Bar Plugin For jQuery