禁用按钮时在提交按钮前添加加载图标

Question

In my Detail Form there's on Submit Button on click I'm calling a Ajax request

while ajax request is processing my submit button is disabled

What I want is to show loader icon like fa-spinner fa-spin when button is disabled

here's a challenge

1. I don't want to add any tag inside a button <button disabled>...</button>
2. using only HTML, CSS, font-awesome

I'm also trying to develop this, but I think I can get more good suggestion here.

Here JsFiddle for basic start

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; } button:disabled{ opacity: 0.66 }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div id="banner-message"> <p>Show loader on button Disabled</p> <button type="button" id="btnSubmit"> Submit</button> <!-- should not change anything inside button tag, you can add class or property --> <br /> <label><input type="checkbox" onchange="this.checked? $('#btnSubmit').attr('disabled','disabled'): $('#btnSubmit').removeAttr('disabled')" /> Disable Button</label> </div>

Answer 1

In your jsFiddle, you could add the following

.fa-spinner {
  width: 0;
  opacity: 0;
}

button:disabled .fa-spinner {
  width: auto;
  opacity: 1;
}

If this is what your were looking for.

Answer 2

Well in that case you could use a pseudo element like before, and add the css of the fa spinner to it :D

button:before {
  content: "\f110";
  display: inline-block;
  vertical-align: middle;
  margin: .1em .4em .2em 0;
  font-family: "Font Awesome 5 Free";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  animation: fa-spin 2s linear infinite;
  opacity: 0;
  width: 0;
}

button:disabled:before {
  opacity: 1;
  width: auto;
} 

Answer 3

I write a full example for your situation.

 function submitForm() { $('.form').submit(function(event) { event.preventDefault(); var form = $(this); var submitButton = $('.js-submit-btn'); $.ajax({ type: form.attr('method'), url: form.attr('action'), beforeSend: function () { // it's action will launch after you click submit button on form submitButton.attr('disabled', true); if($(submitButton).has('.fa-spinner').length === 0) { $(submitButton).prepend('<i class="fas fa-spinner fa-spin"></i>'); } }, complete: function () { // it's action will launch after ajax request end setTimeout(function () { submitButton.attr('disabled', false); if($(submitButton).has('.fa-spinner').length) { $(submitButton).find('.fa-spinner').remove(); } }, 1500); }, data: form.serialize(), success: function (response) { console.log('Response: ', response); }, error: function () { console.log('error'); } }); return false; }); } submitForm();

 <form method="post" action="/your_action_url" class="form" > <input type="text" name="client_name" placeholder="Your name"> <input type="email" name="client_email" placeholder="Your email"> <button type="submit" class="js-submit-btn"> <i class="far fa-envelope"></i> Send Email</button> </form>

Answer 4

to show a loader on particular button just need to add class disabled-on-loading

example <button class="disabled-on-loading" />

.disabled-on-loading:disabled:before {
        opacity: 0.65;
        content: "\f110";
        font-weight: 900;
        display: inline-block;
        font: normal normal normal 14px/1;
        font-family: "Font Awesome 5 Free";
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        text-rendering: auto;
        line-height: 1;
        animation: fa-spin 1s infinite steps(9);
    }

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; } button:disabled{ opacity: 0.65 } .disabled-on-loading:disabled:before { opacity: 0.65; content: "\\f110"; font-weight: 900; display: inline-block; font: normal normal normal 14px/1; font-family: "Font Awesome 5 Free"; -webkit-font-smoothing: antialiased; display: inline-block; text-rendering: auto; line-height: 1; animation: fa-spin 1s infinite steps(9); }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div id="banner-message"> <p>Show loader on button Disabled</p> <button type="button" class="disabled-on-loading" id="btnSubmit"> Submit</button> <!-- should not change anything inside button tag, you can add class or property --> <br /> <label><input type="checkbox" onchange="this.checked? $('#btnSubmit').attr('disabled','disabled'): $('#btnSubmit').removeAttr('disabled')" /> Disable Button</label> </div>