JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<button class="btn btn-primary btn-block testCon"><span class="spinner" style="display:none;"><span class="glyphicon glyphicon-refresh glyphicon-spin"></span></span> Test Connexion</button>

CSS

body{
    margin:30px;
}
.spinner img{
    height:18px;
}

.glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

JavaScript

$('.testCon').click(function conTester(){
                    $('.spinner').toggle()
                    $('button').prop('disabled', true)
                    setTimeout(stopConn, 2000);
                    })

function stopConn(){
                  $('.spinner').toggle()
                   $('button').prop('disabled', false)
                 }