jQuery Plugin To Manipulate CSS3 Loading Animations - EasyLoading
File Size: | 54.8 KB |
---|---|
Views Total: | 4539 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

EasyLoading is a lightweight, configurable, easy-to-use jQuery loading spinner plugin to manage and manipulate CSS3 based loading animations for Ajax/Async operations.
Loading animation included:
- BALL_PULSE
- BALL_CLIP_ROTATE
- BALL_CLIP_ROTATE_PULSE
- SQUARE_SPIN
- BALL_CLIP_ROTATE_MULTIPLE
- BALL_PULSE_RISE
- BALL_ROTATE
- CUBE_TRANSITION
- BALL_ZIP_ZAG
- BALL_ZIP_ZAG_DEFLECT
- BALL_TRIANGLE_PATH
- BALL_SCALE
- LINE_SCALE
- LINE_SCALE_PARTY
- BALL_SCALE_MULTIPLE
- BALL_PULSE_SYNC
- BALL_BEAT
- LINE_SCALE_PULSE_OUT
- LINE_SCALE_PULSE_OUT_RAPID
- BALL_SCALE_RIPPLE
- BALL_SCALE_RIPPLE_MULTIPLE
- BALL_SPIN_FADE_LOADER
- LINK_SPIN_FADE_LOADER
- TRIANGLE_SKEW_SPIN
- PACMAN
- SEMI_CIRCLE_SPIN (Default)
How to use it:
1. Load the easy-loading.css
in the document's head section that provides the basic styles and 26 CSS3 loading animations.
<link rel="stylesheet" href="css/easy-loading.css">
2. Load the main JavaScript file easy-loading.js
after the latest version of jQuery JavaScript library.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src="js/easy-loading.js"></script>
3. The JavaScript to show a default loading spinner on the screen.
EasyLoading.show({ // options here });
4. Auto dismiss the loading spinner after 5 seconds.
EasyLoading.show({ timeout: 5000 });
5. Or dismiss the loading spinner manually.
EasyLoading.hide();
6. Add custom loading text and button to the loading spinner.
EasyLoading.show({ text: "", button: null });
7. Change the default loading animation.
EasyLoading.show({ type: TYPE.SEMI_CIRCLE_SPIN });
8. Perform an action when the loading is finished.
EasyLoading.show({ callback: function(){ // ... } });
Change log:
2017-12-02
- API modified, container mode supported.
This awesome jQuery plugin is developed by yeye0922. For more Advanced Usages, please check the demo page or visit the official website.