@softon/loader

Lightweight JavaScript loading spinner for HTML, React, Vue and Node applications.

Loader.js

A lightweight, dependency-free JavaScript loading indicator that works for both full-page overlays and specific HTML elements.

Installation

npm

npm install @softon/loader

ES Module

import Loader from "@softon/loader";

Features

• 🚀 Pure JavaScript (No dependencies)
• 🎨 Customizable spinner size and color
• 🌗 Optional overlay background
• 📦 Lightweight and reusable
• 🖥️ Full-page loading indicator
• 📄 Element-specific loading indicator
• ⚡ Easy to integrate with Fetch, Axios, jQuery, or any JavaScript project

Installation

Using jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/@softon/loader/dist/loader.min.js"></script>

Or download

Download loader.js and include it in your project.

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

Basic Usage

Full-page Loader

Loader.show();

setTimeout(() => {
    Loader.hide();
}, 2000);

Loader Inside a Specific Element

<div id="content">
    Loading content...
</div>

Loader.show({
    targetId: "content"
});

setTimeout(() => {
    Loader.hide("content");
}, 2000);

Customization

Loader.show({
    targetId: "content",
    size: 60,
    color: "green",
    overlay: true,
    background: "rgba(255,255,255,0.6)"
});

API

Loader.show(options)

Displays a loading spinner.

Options

| Option | Type | Default | Description | | ------------ | ------- | ------------------------ | ------------------------------------------------------------------ | | targetId | String | null | ID of the target element. If omitted, a full-page loader is shown. | | size | Number | 40 | Spinner size in pixels. | | color | String | "#0d6efd" | Spinner color. | | overlay | Boolean | true | Show or hide the overlay background. | | background | String | "rgba(255,255,255,.5)" | Overlay background color. |

Example:

Loader.show({
    color: "red",
    size: 50
});

Loader.hide(targetId)

Hides the loader.

Hide Full-page Loader

Loader.hide();

Hide Element Loader

Loader.hide("content");

Axios Example

Loader.show();

axios.get("/api/users")
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    })
    .finally(() => {
        Loader.hide();
    });

Fetch Example

Loader.show({
    targetId: "content"
});

fetch("/api/users")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .finally(() => {
        Loader.hide("content");
    });

Browser Support

• Chrome
• Edge
• Firefox
• Safari
• Opera

License

MIT License

Feel free to use, modify, and distribute this project.

Contributing

Contributions, bug reports, and feature requests are welcome.

If you find an issue or have an idea for improvement, please open an issue or submit a pull request.

Author

Developed and maintained by LNT Softwares.