Lightweight Loading Overlay Plugin For Bootstrap 5 – AvalynxLoader

AvalynxLoader is a lightweight JavaScript plugin for Bootstrap 5 that displays a loading overlay with an animated spinner over specified DOM elements.

This helps indicate to your visitors that something is loading into the element, such as AJAX requests, data synchronization, or any other process that requires a visual cue.

How to use it:

1. Install AvalynxLoader into your Bootstrap project using NPM:

npm install avalynx-loader
import { AvalynxLoader } from 'avalynx-loader';

2. Alternatively, you can directly load the avalynx-loader.js script into your webpage:

<script src="/dist/js/avalynx-loader.js"></script>

3. Create a new AvalynxLoader instance and target the desired DOM element:

const myLoader = new AvalynxLoader("#container");

4. Enable or disable the loading overlay:

// Enable
myLoader.load=true;

// Disable
myLoader.load=false;

5. Set the class name for the loading spinner:

const myLoader = new AvalynxLoader("#container",
      {
        className: 'loading-spinner'
      }
);

6. Customize the text displayed with the loading spinner:

const myLoader = new AvalynxLoader("#container",
      {
        className: 'loading-spinner'
      },
      {
        loaderText: 'Loading...'
      }
);

Changelog:

03/08/2025

• v0.0.3

The post Lightweight Loading Overlay Plugin For Bootstrap 5 – AvalynxLoader appeared first on CSS Script.