Show loader on button Disabled

Developed By Ravi Makwana

by RaviMakwana

HTML

<div id="banner-message">
  <p>Show loader on button Disabled</p>
  <button type="button" class="disabled-on-loading" id="btnSubmit"> Submit</button>
  <br />
  <label><input type="checkbox" onchange="this.checked? $('#btnSubmit').attr('disabled','disabled'): $('#btnSubmit').removeAttr('disabled')" /> Disable Button</label>
  
</div>

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
}

/*---- use below if you have used font awesome -----*/
/*
.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);
    }
    */
/* ----- loader without any dependency ----- */    
@-webkit-keyframes loading-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes loading-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}
    
        .disabled-on-loading:disabled:before {
            content: " "; 
            margin-right: 5px;
            display: inline-block;
            width: 0.6rem;
            height: 0.6rem;
            vertical-align: text-bottom;
            border: 0.25em dotted;
            border-right-color: transparent;
            border-radius: 50%;
            -webkit-animation: loading-spin 1s linear infinite;
            animation:...

JavaScript

// find elements