Custom Loading Spinner with SweetAlert2 and Tailwind CSS

loadingSpinner.js

const show = (
    text = 'Please wait, the system is preparing necessary data.'
) => {
    Swal.fire({
        width: '550px',
        html: `
        <div class="bg-transparent flex flex-col items-center justify-center gap-4">
            <img class="w-20" src="../media/gifs/lightBlueLoadingSpinner.gif" alt="Loading gif">
            
            <strong>${text}</strong>
        </div>
    `,
        color: '#014766',
        allowOutsideClick: false,
        allowEscapeKey: false,
        allowEnterKey: false,
        showConfirmButton: false,
        didOpen: () => {
            Swal.showLoading();
            Swal.getActions().style.display = 'none'; // Hide the action bar as it's not needed
        },
    });
};

const hide = () => {
    Swal.close();
};

const loadingSpinner = {
    show,
    hide,
};

export default loadingSpinner;





// How to use
import loadingSpinner from './path/to/loadingSpinner';

// Show the loading spinner
loadingSpinner.show('Your custom message here');

// Hide the loading spinner
loadingSpinner.hide();

Description:

This gist contains a simple utility for displaying a custom loading spinner using SweetAlert2. The loadingSpinner object provides two methods: show and hide. The show method displays a SweetAlert2 modal with a loading spinner and a customizable message, while the hide method closes the modal. This is useful for indicating to users that the system is processing data and to prevent any interactions during this time.

Usage:

1. Import the loadingSpinner object.
2. Call loadingSpinner.show() to display the loading spinner.
3. Call loadingSpinner.hide() to hide the loading spinner when the processing is complete.