Preloader для кнопки

by Denis Tverdokhlebov

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" name="Submit" class="exclusive">
<span>КУПИТЬ!</span>
</button>

CSS

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

button.exclusive
{
background-color: rgb(221, 221, 221);
background-image: linear-gradient(rgb(0, 154, 208), rgb(0, 122, 183));
border: 1px solid rgb(1, 39, 64);
border-radius: 5px;
box-sizing: border-box;
color: #FFF;
cursor: pointer;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
height: 51px;
line-height: 18px;
text-align: center;
text-shadow: 0 1px #015883;
padding: 0 .5em;
}

button.exclusive:before
{
  font-family: "FontAwesome";
  top: 0;
  left: 0;
  bottom: 0;
  color: white;
  font-size: 25px;
  line-height: 47px;
  text-shadow: 0 1px #015883;
  content: "\f07a";
  z-index: 2;
  width: 25px;
  text-align: center;
  border: none;
  border-radius: 0;
  display: inline-block;
}

button.exclusive:hover
{
      background-image: linear-gradient(#007ab7, #009ad0);
}

button.exclusive.disabled:before
{
  content: "\f110";
  animation: 2s linear 0s normal none infinite spin;
  -webkit-animation: 2s linear 0s normal none infinite spin;
  -moz-animation: 2s linear 0s normal none infinite spin;
}


button.exclusive.added:before
{
  content: "\f00c";
}

JavaScript

$(function() {
    $(document).on('click', 'button.exclusive', function() {
        var $button = $(this);
        $button.removeClass('added').addClass('disabled').attr('disabled', 'disabled');
        setTimeout(function () {
            $button.removeClass('disabled').addClass('added').removeAttr('disabled');
        }, 1000);
    });
});