Show Loading Using Jquery In Bootstrap 4 With Data Loading Text Duplicate

Loading indicators play a crucial role in user experience when dealing with web applications. They inform users that something is happening in the background, preventing frustration from waiting without any feedback. In this article, we will delve into demonstrating loading states using jQuery within Bootstrap 4. Additionally, we will cover how to incorporate a data loading text that duplicates, creating a more engaging and interactive loading experience for users.

Bootstrap, a popular front-end framework, offers various components to enhance user interfaces. One of these components is the Loading State, which you can use to disable buttons and show loading spinners. When combined with jQuery, you can create dynamic loading effects that respond to user actions seamlessly.

To implement loading indicators in Bootstrap 4 using jQuery, you first need to include jQuery in your project if you haven't already. You can do this by adding the following script tag in your HTML file:

Once jQuery is included, you can create a function to show a loading state when a button is clicked. Here is a basic example of how you can achieve this:

$(document).ready(function() {
    $('#submitBtn').click(function() {
        var $btn = $(this);
        $btn.button('loading');

        setTimeout(function() {
            $btn.button('reset');
        }, 3000);
    });
});

In this snippet, we attach a click event handler to a button with the ID "submitBtn." When the button is clicked, we disable it using the `button('loading')` method, simulating a loading state. After a delay of 3000 milliseconds (3 seconds), we reset the button back to its original state using the `button('reset')` method.

Now, let's enhance the loading experience by adding a data loading text that duplicates. This will give users more context about what is happening in the background. To achieve this, we need to create a span element within the button element:

<button id="submitBtn" type="button" class="btn btn-primary" data-loading-text="Loading..."><span class="loading-text">Loading...</span> Submit</button>

Next, we'll modify our jQuery function to update the text inside the `loading-text` span when the button is in the loading state:

$(document).ready(function() {
    $('#submitBtn').click(function() {
        var $btn = $(this);
        $btn.button('loading');
        $btn.find('.loading-text').text('Please wait...');

        setTimeout(function() {
            $btn.button('reset');
            $btn.find('.loading-text').text('Loading...');
        }, 3000);
    });
});

By targeting the `loading-text` span within the button element, we can dynamically change the loading text to provide users with real-time feedback about the loading process.

By combining Bootstrap's loading state feature with jQuery, you can create a more engaging user experience by showcasing loading indicators and updating loading text dynamically. Remember to keep your loading times reasonable to maintain a smooth user experience.