10 Awesome Loading Indicators With jQuery And CSS - JAjaxLoader

File Size: 46.1 KB
Views Total: 5936
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
10 Awesome Loading Indicators With jQuery And CSS - JAjaxLoader

The JAjaxLoader jQuery plugin provides a collection of 10 cool, creative loading spinners & indicators for async actions.

See also:

How to use it:

1. Load the main JavaScript file jajaxloader.js after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
<script src="./js/jajaxloader.js"></script>

2. Load a loading indicator of your choice in the document.

<link rel="stylesheet" href="./skin/jajaxloader.css">
<link rel="stylesheet" href="./skin/lukehaas/vertical_bars.css">
<link rel="stylesheet" href="./skin/lukehaas/circle_on_path.css">
<link rel="stylesheet" href="./skin/lukehaas/tear_ball.css">
<link rel="stylesheet" href="./skin/vulchivijay/rosace.css">
<link rel="stylesheet" href="./skin/cssload/thecube.css">
<link rel="stylesheet" href="./skin/cssload/colordots.css">
<link rel="stylesheet" href="./skin/cssload/flipping_square.css">
<link rel="stylesheet" href="./skin/cssload/spinning_square.css">
<link rel="stylesheet" href="./skin/cssload/zenith.css">
<link rel="stylesheet" href="./skin/cssload/ventilator.css">

3. Call the function on the targer container and specify the loading CSS you want to use.

  cssClass: 'vulchivijay_rosace'

4. You can use a custom image instead.

  img: 'loader.gif'

5. Customize the content of the loading indicator that only works if the loader is not an image.

  content: 'your own content here'

6. Customize the animation speed when the loading indicator fades in and fades out.

  fadeSpeed: 250

This awesome jQuery plugin is developed by lingtalfi. For more Advanced Usages, please check the demo page or visit the official website.