A Simple Loading Spinner for Any Project

Noureddine Belguinan — Sat, 26 Jul 2025 17:39:56 +0000

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();

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>

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();

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();

With React:

// Using a ref
formRef.current.loader().show();

With jQuery:

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

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

Or use it directly from a CDN:

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

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:

Introducing Pretty-js-log: Add Beautiful, Colorful Logging to Your Node.js Apps 🎨

Noureddine Belguinan — Wed, 06 Nov 2024 18:48:29 +0000

Ever wished your Node.js console logs were more visually appealing and easier to parse? Meet pretty-js-log, a lightweight logging package that brings color and structure to your console output while also supporting file logging!

✨ Key Features

🎨 Colorful console output with different colors for different log levels
📁 Built-in file logging support
⚡ Works with both Node.js and Bun
🕒 Timezone-aware timestamps
🔍 Process ID tracking
🎯 JSON/Array pretty formatting

🚀 Quick Start

Install with npm:

npm install pretty-js-log

Or with Bun:

bun install pretty-js-log

Basic usage:

const { logFactory } = require('pretty-js-log');

// Create a basic logger
const logger = logFactory({});

// Start logging!
logger('Hello World');
logger.info('This is an info message');
logger.warn('Warning! Something needs attention');
logger.error('Oops! Something went wrong');
logger.debug('Debug information');

🔧 Advanced Usage

Save Logs to File

const logger = logFactory({
    path: './logs/app.log',  // Logs will be saved here
    id: process.pid          // Add process ID to logs
});

logger('This will be saved to the file too!');

Logging Objects

const data = {
    user: 'john',
    age: 25
};

logger('User data:', data);  // Objects are automatically formatted

Disable Console Output

If you want to write logs only to file without console output, use the toStdout option:

const logger = logFactory({
    path: './logs/app.log',
    toStdout: false    // Logs will only be written to the file only
});

logger('This will only appear in the log file');
logger.info('Silent logging to file');

🤔 Why Another Logging Package?

Simplicity: Just import and use - no complex configuration needed
Lightweight: Minimal dependencies, perfect for small to medium projects
Visual Appeal: Makes debugging more pleasant with color-coded log levels
File Support: Built-in file logging without extra dependencies
Modern: Works with both Node.js and Bun

🔗 Links

🤝 Contributing

This is an open-source project and we welcome contributions! Feel free to:

Open issues
Submit PRs
Suggest features
Help with documentation

📈 Future Plans

File size-based rotation
External logging API endpoints support

Give it a try and let me know what you think in the comments below!

Thanks!

DEV Community: Noureddine Belguinan