Real-time loading and progress indicator integration with Jetformbuilder forms

gistfile1.txt

UPDATED: Fixed some issues..... 10.07.2024

Real-time loading and progress indicator integration with Jetformbuilder forms

1. Copy the following HTML code and create a HTML snippet using your snippet plugins. Paste the code into the plugin and save it.

Description:
This comprehensive solution integrates real-time loading and progress indicators into JetFormBuilder forms, 
significantly enhancing user interaction and experience during form submissions. Employing HTML, CSS, and JavaScript, 
the setup includes a visually appealing loading spinner and a dynamically updating percentage progress bar. 
These indicators are precisely aligned with the form's AJAX submissions, ensuring users receive immediate 
feedback on the status of their uploads.

_____________________________________________________

<style>
    /* Overlay and Loading Indicator Styles */
    .loading-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); 
        z-index: 1000;
    }
    .loading-overlay.visible {
        display: block;
    }
    .loading-indicator, .progress-bar-container {
        display: none;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
    }
    .loading-indicator {
        top: calc(50% - 30px); 
        transform: translate(-50%, -50%);
    }
    .loading-indicator.visible, .progress-bar-container.visible {
        display: block;
    }
    .spinner {
        border: 8px solid #f3f3f3;
        border-top: 8px solid #3498db; 
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: rotate 2s linear infinite;
    }
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    /* Progress Bar Styles */
    .progress-bar-container {
        width: 30%;
        background-color: #fff; 
        height: 20px;
        top: calc(50% + 20px);
        line-height: 20px;
        border-radius: 30px;
        overflow: hidden; 
    }
    .progress-bar {
        width: 0%;
        height: 100%; 
        background-color: #09b872; 
        color: white; 
        text-align: center;
        border-radius: 30px; 
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
    $('.jet-form-builder').submit(function(e) {
        e.preventDefault();
        
        // Validate the form first
        if (!this.checkValidity()) {
            $(this).find(':submit').click(); // Trigger HTML5 validation
            return; // Exit if validation fails
        }

        $('.loading-overlay').addClass('visible');
        $('.loading-indicator').addClass('visible');
        $('.progress-bar-container').addClass('visible');

        var formData = new FormData(this);
        $.ajax({
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        percentComplete = parseInt(percentComplete * 100);
                        $('.progress-bar').width(percentComplete + '%');
                        $('.progress-bar').text(percentComplete + '%');
                    }
                }, false);
                return xhr;
            },
            url: $(this).attr('action'), // Ensure this points to the correct server-side script
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                console.log('Success: ', response);
                $('.loading-overlay').removeClass('visible');
                $('.loading-indicator').removeClass('visible');
                $('.progress-bar-container').removeClass('visible');
                $('.progress-bar').width('0%'); // Reset progress bar
            },
            error: function(xhr, status, error) {
                console.error('Error: ', error);
                $('.loading-overlay').removeClass('visible');
                $('.loading-indicator').removeClass('visible');
                $('.progress-bar-container').removeClass('visible');
                $('.progress-bar').width('0%'); // Reset progress bar
            }
        });
    });
});
</script>

<div class="loading-overlay"></div>
<div class="loading-indicator">
    <div class="spinner"></div>
</div>
<div class="progress-bar-container">
    <div class="progress-bar"></div>
</div>