Loading on Button

by ginpei

HTML

<p>
    <button class="submit">Submit</button>
    <button class="submit red">Submit</button>
    <button class="submit green">Submit</button>
    <button class="submit blue">Submit</button>
    <button class="submit black">Submit</button>
</p>

CSS

.submit.loading::before {
    background-color: rgba(0,0,0,.5);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.submit.loading::after {
    -ms-animation: rotate 1s infinite linear;
    -moz-animation: rotate 1s infinite linear;
    -webkit-animation: rotate 1s infinite linear;
    animation: rotate 1s infinite linear;
    content: "*";
    color: #fff;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
@-ms-keyframes rotate {
    0% { -ms-transform: rotate(0); }
    100% { -ms-transform: rotate(360deg); }
}
@-moz-keyframes rotate {
    0% { -moz-transform: rotate(0); }
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(0); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes rotate {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}


/* -------- */

.submit {
    border: solid 1px;
    box-shadow:
        0 0 20px rgba(0,0,0,.3) inset,
        1px 1px 0 rgba(255,255,255,.5) inset,
        -1px -1px 0 rgba(0,0,0,.5) inset;
    padding: 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255,255,255,.3);
}
.submit.black {
    background-color: #666;
    border-color: #333;
    color: #eee;
}
.submit.red {
    background-color: #f99;
    border-color: #900;
    color: #f00;
}
.submit.green {
    background-color: #9c9;
    border-color: #090;
    color: #030;
}
.submit.blue {
    background-color: #3cf;
    border-color: #669;
    color: #003;
}
.submit.green,
.submit.blue {
    box-shadow:
        0 0 10px rgba(0,0,0,.2) inset,
        1px 1px 0 rgba(255,255,255,.5) inset,
        -1px -1px 0 rgba(0,0,0,.5) inset;
}

JavaScript

var elSubmits = document.querySelectorAll('.submit');
for (var i=0, l=elSubmits.length; i<l; i++) {
    var elSubmit = elSubmits[i];
    elSubmit.addEventListener('click', onclicksubmit);
}

function onclicksubmit(event) {
    var elSubmit = event.currentTarget;
    var classList = elSubmit.classList;
    if (classList.contains('loading')) {
        return;
    }
    
    classList.add('loading');
    
    setTimeout(function() {
        classList.remove('loading');
    }, ~~(Math.random()*3000));
}