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

Question

在我的详细信息表单中有提交按钮单击我正在调用 Ajax 请求

当 ajax 请求正在处理时，我的提交按钮被禁用

我想要的是在禁用按钮时显示像 fa-spinner fa-spin 这样的加载程序图标

这是一个挑战

我不想在按钮内添加任何标签<button disabled>...</button>
仅使用 HTML、CSS、超棒的字体

我也在尝试开发这个，但我想我可以在这里得到更多好的建议。

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

在您的 jsFiddle 中，您可以添加以下内容

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

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

如果这就是您要找的。

Answer 2

在那种情况下，您可以像以前一样使用伪元素，并将 fa 微调器的 css 添加到其中 :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

要在特定按钮上显示加载程序，只需添加 class disabled-on-loading

示例<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>

Answer 4

我根据你的情况写了一个完整的例子。

    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>

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

Add Loading Icon before the submit button When Button is Disabled

html

css

button

font-awesome

bootstrap-4