JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/todc-bootstrap/3.3.6-3.3.6/js/bootstrap.min.js"></script>

<form id="quote-form" method="post" action="quote.php">
                           
<div class="col-md-12">
<div class="messages"></div>
</div>


<div class="col-sm-12 ">
<div class="form-group">
<textarea id="form_message" name="message" class="form-control textarea" placeholder="Tell Us About Your Project" rows="5" required="required" data-error="Please,leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>

<div class="formbuttons">
<button type="submit" id="submitbutton" class="btn buttoncolor has-spinner"> <span class="spinner"><img src="http://assets2.bostonlogic.com/images/spinner.gif" width="10" height="10"></span>Get a Quote</button>
</div>

</form>

CSS

.spinner {
    opacity: 0;
    display:none;
    width: 20px;
    height:10px;
    -webkit-transition: opacity 0.25s, max-width 0.45s;
    -moz-transition: opacity 0.25s, max-width 0.45s;
    -o-transition: opacity 0.25s, max-width 0.45s;
    transition: opacity 0.25s, max-width 0.45s;
    /* Duration fixed since we animate additional hidden width */
}
.has-spinner.active {
    cursor:progress;
}
.has-spinner.active .spinner {
    display:inline-block;
    opacity: 1;
    max-width: 50px;
    /* More than it will ever come, notice that this affects on animation duration */
}

JavaScript

(function () {
    $(document).on("click", "#submitbutton", function (event) {
        var elem = $(event.currentTarget);
        elem.addClass('active');
        var formdata = $("#filterdata").serializeArray();
        var url1 = "/SelectUnit";
        $.ajax({url:"/echo/html", data: {delay:1}}).always(function(){
            elem.removeClass('active');
        });
    });
})();