Lightweight Loading Overlay Plugin For Bootstrap 5 – AvalynxLoader

Preview:

Description:

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:

v1.0.1 (10/10/2025)

• Added checks for invalid options and language objects, preventing runtime errors and ensuring more reliable initialization.
• Refined module export logic for better CommonJS/ESM interoperability and added a direct import for Bootstrap utilities.