JSFiddle - React, Tailwind, and code Playground

by Bhumika107

HTML

<div class='main-form'>
<form>
<input type='submit' value='button' />
</form>

</div>

SCSS

.loading {
    //background: rgba(#999, 0.9);
    background: rgba(158,158,158,0.9);
    bottom: -10px;
    display: none;
    left: -20px;
    position: absolute;
    right: -20px;
    top: -10px;

    .text {
        color: #fff;
        font-size: 26px;
        font-weight: 700;
        left: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        }
    }

JavaScript

function main_form_overlay() {
    var form_outer = jQuery('.main-form'),
    form = jQuery('.main-form form'),
    html,
    overlay;

    html = '<div class="loading"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';

    form_outer.append(html);

    overlay = jQuery('.main-form .loading');

    form.on('submit', function(e){
        alert("In Here!");

        if (!overlay.is(':visible')) {
            overlay.show();
            alert("Show Overlay");
        } else {
            overlay.hide();
            alert("Hide Overlay");
        }
        e.preventDefault();
    });
}
main_form_overlay();