Animated Loading Spinner with Smart AJAX Support – VanillaSpin

VanillaSpin is a lightweight, dependency-free JavaScript library that adds animated loading spinners to the whole page or specific containers.

It includes automatic AJAX request detection that can monitor AJAX calls and automatically display the loading spinner when a request starts and hide it when the request completes.

VanillaSpin also provides exclusion options for scenarios where loading spinners are not needed on certain pages or for specific AJAX requests. You can configure the library to prevent the loader from appearing on specific pages or for particular AJAX URLs.

How to use it:

1. Download vanillaSpin.js and include it on your webpage.

<script src="vanillaSpin.js"></script>

2. Initialize VanillaSpin with default configuration. This setup will activate VanillaSpin with its default settings: a blue spinner, medium size, semi-transparent white background, fade-in effect, AJAX detection enabled, and the loader attached to the full document.

const loader = new VanillaSpinLoader();
loader.init();

3. Customize the loading spinner with the following configuration options.

const loader = new VanillaSpinLoader({
  color: "#3498db", // Loader color
  size: "50px", // Loader size
  background: "rgba(255, 255, 255, 0.8)", // Background overlay
  fadeIn: true, // Enable fade-in effect
  detectAjax: true, // Auto-detect AJAX requests
  container: document.body, // Default container
  customLoader: null, // Custom loader element
  excludePages: ["/no-loader.html"], // Pages where loader should not appear
  excludeAjaxUrls: ["/api/no-loader"] // AJAX calls that should not trigger the loader
});

4. You can programmatically control the loader’s visibility using the show() and hide() methods:

loader.show(); 
loader.hide();