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

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.