Load spinner Windows 10

Spinner like Windows 10

HTML

<div class="action">Start loading</div>
<div class="stop">Stop loading</div>
<div class="loader"></div>

CSS

/* based on http://projects.lukehaas.me/css-loaders/ */
.action, .stop {
    display:inline-block;
    padding:5px 20px;
    background:#ccc;
    margin:20px;
    cursor:default;
}

.loader {
  top: 0;
  left: 0;
  display: none;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  font-size: 10px;
  position: absolute;
  border-top: 3px solid rgba(36, 148, 243, 1);
  border-right: 3px solid rgba(36, 148, 243, 1);
  border-bottom: 3px solid rgba(36, 148, 243, 1);
  border-left: 3px solid #22cfff;
  -webkit-box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.7), 0px 0px 1px 0px rgba(0,0,0,0.7);
  box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.7), 0px 0px 1px 0px rgba(0,0,0,0.7);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 0.9s infinite linear;
  animation: load8 0.9s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

JavaScript

$.fn.extend(
{
	reset_on : function(event_name, callback)
    { return this.off(event_name).on(event_name, callback); }
});

var g_loader = $('.loader');

function add_cursor_progress(evt)
{
    function refresh_pos(e_)
    {
    	g_loader.css({
            display : "inline",
            left : e_.pageX + 8,
            top : e_.pageY - 8
        });
    }
    refresh_pos(evt);
    var id = ".addcursorprog";
    
    $('html').reset_on('mousemove' + id, refresh_pos);

    $(window).
    reset_on('mouseenter' + id, function(){ g_loader.css('display', 'inline'); }).
    reset_on('mouseleave' + id, function(){ g_loader.css('display', 'none'); });
}

function remove_cursor_progress(evt)
{
    var id = ".addcursorprog";
    g_loader.css('display', 'none');
    
    $('html').off('mousemove' + id);
    $(window).off('mouseenter' + id).off('mouseleave' + id);
}

$('.action').click(add_cursor_progress);
$('.stop').click(remove_cursor_progress);