Spin.js - Exampe for issue #142

https://github.com/fgnass/spin.js/issues/142

HTML

<script src="http://fgnass.github.com/spin.js/spin.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <form>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <button data-spinning-button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>

CSS

form {
  margin-top: 20px;
}
.fa-spinner{ 
  margin-left: 5px;
}

@using (var f = Html.Bootstrap().Begin(new Form().LabelWidthMd(4)))
{
    @Html.Bootstrap().TextBoxFor(x => x.UserName).Placeholder("Email").ShowValidationMessage(true)
    @Html.Bootstrap().PasswordFor(x => x.Password).Placeholder("Password").ShowValidationMessage(true)

    <button type="submit" class="btn btn-primary btn-block" data-spinning-button>
        Log in
    </button>
}

JavaScript

var zyllemMain = (function() {
  function processSubmitLoader() {
    $("button[data-spinning-button]").click(function(e) {
      var $this = $(this);
      let formId = $this.data("spinning-button");
      let $form = formId ? $("#" + formId) : $this.parents("form");
      if ($form.length) {
        //form.valid() will be applicable If you are using jQuery validate https://jqueryvalidation.org/
        //asp.net mvc used it by default with jQuery Unobtrusive Validation
        //you need to check the form before it goes into the if statement
        //if ($form.valid()) {
        $this
          .append("<i class='fa fa-spinner fa-spin'></i>")
          .attr("disabled", "");
        setTimeout(() => {
          $form.submit();
        }, 2000);
        //}
      }
    });
  }
  return {
    initSpinnerButton: processSubmitLoader
  };
})();

$(document).ready(function() {
  zyllemMain.initSpinnerButton();
});