circular arrow movement with button

by Berat Emre Nebioğlu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<input type="button" class="ajaxExecutor" value="Test Me" />
<div class="in-progress hide">
    <i class="fa fa-refresh fa-spin busy-icon"></i>
</div>

SCSS

.hide { display: none; }

.in-progress {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    background-color: rgba(64, 64, 64, 0.25);
    z-index: 999;
}

.busy-icon {
    position: absolute;
    top: 25%;
    left: 25%;
    font-size: 10em;
}

JavaScript

var $inProgress = $('.in-progress');
var $button = $('.ajaxExecutor');

$button.on('click', function() {
    $button.blur();
    $inProgress.removeClass('hide');
    
    setTimeout(function(){
        $inProgress.addClass('hide');
    }, 5000);
});