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="/path/to/loadgo-vanilla.js"></script>

<!-- jQuery plugin (jQuery 4+): -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/loadgo.js"></script>

3. Add a PNG image into your web page.

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

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.