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:

• 10 Best Loading Spinner & Indicator jQuery Plugins
• 10 Best Loading Spinner/Indicator JavaScript & CSS Libraries
• 80+ Best Pure CSS Loading Spinners For Front-end Developers

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" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<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.

$('#target').ajaxloader({
  cssClass: 'vulchivijay_rosace'
});

4. You can use a custom image instead.

$('#target').ajaxloader({
  img: 'loader.gif'
});

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

$('#target').ajaxloader({
  content: 'your own content here'
});

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

$('#target').ajaxloader({
  fadeSpeed: 250
});

---

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