DEV Community

Noureddine Belguinan
Noureddine Belguinan

Posted on

A Simple Loading Spinner for Any Project

js-form-loader: When you just need a loading indicator that works everywhere

The Search for Something Simple

js-form-loader isn't trying to be everything to everyone. It's just a small utility that solves one common problem: showing loading states on specific elements across any type of web project.

If you need something more complex with custom animations or advanced features, there are other great libraries for that. But if you just need a simple, reliable loading indicator that works everywhere, this might be useful.

What this plugin Does?

It's quite simple - you can add a loading overlay to any DOM element with two methods:

// Show loading spinner
element.loader().show();

// Hide loading spinner  
element.loader().hide();
Enter fullscreen mode Exit fullscreen mode

That's the entire API.

Basic Usage

Here's how it works:

<form id="contact-form">
    <input type="text" placeholder="Name">
    <input type="email" placeholder="Email">
    <button type="submit">Send</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/js-form-loader/dist/js-form-loader.min.js"></script>
<script>
    const form = document.getElementById('contact-form');

    form.addEventListener('submit', async (e) => {
        e.preventDefault();

        form.loader().show();

        try {
            await fetch('/contact', { 
                method: 'POST',
                body: new FormData(form)
            });
        } finally {
            form.loader().hide();
        }
    });
</script>
Enter fullscreen mode Exit fullscreen mode

Works on Any Element

You can use it on forms, buttons, cards, or any other element:

// On a form
document.querySelector('form').loader().show();

// On a button
document.querySelector('button').loader().show();

// On a card or section
document.querySelector('.product-card').loader().show();

// On any element with an ID
document.getElementById('data-table').loader().show();
Enter fullscreen mode Exit fullscreen mode

Framework Compatibility

Since it's vanilla JavaScript, it works alongside any framework or library:

With Vue:

// In your Vue component
this.$refs.myForm.loader().show();
Enter fullscreen mode Exit fullscreen mode

With React:

// Using a ref
formRef.current.loader().show();
Enter fullscreen mode Exit fullscreen mode

With jQuery:

// Get the DOM element and use the loader
$('#form').get(0).loader().show();
Enter fullscreen mode Exit fullscreen mode

With WordPress, vanilla JS, or any other setup - it just works.

Size and Dependencies

The entire library is about 2KB minified. It has no dependencies - no jQuery, no framework requirements, no separate CSS files.

Installation

You can install it via npm:

npm install js-form-loader
Enter fullscreen mode Exit fullscreen mode

Or use it directly from a CDN:

<script src="https://cdn.jsdelivr.net/npm/js-form-loader/dist/js-form-loader.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Why Element-Based?

Many loading libraries focus on full-page overlays, but sometimes you just want to show loading on a specific part of your page - a form, a data table, or a card component. This approach gives you that granular control.

Links:

Top comments (0)