jQuery(function($) {
//подвешиваем на событие клик по кнопке
$('#button').on('click', function(e) {
//отключение ее
$(e.currentTarget).attr('disabled', true);
// показываем процесс закгрузки
$('.loader').toggleClass('hide');
// подвешиваем паузу на 5 секунд
setTimeout(function() {
// скрываем процесс загрузки
$('.loader').toggleClass('hide');
// делаем кнопку активной
$(e.currentTarget).attr('disabled', false);
// добавляем текст о том что загрузка успешно закончилась
$(e.currentTarget).after('<div>Загрузка завершена</div>');
}, 5000)
});
});
.hide {
display: none;
}
.loader {
font-size: 45px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 72px auto;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease;
animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em #999999, 0 -0.83em 0 -0.42em #999999, 0 -0.83em 0 -0.44em #999999, 0 -0.83em 0 -0.46em #999999, 0 -0.83em 0 -0.477em #999999;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em #999999, 0 -0.83em 0 -0.42em #999999, 0 -0.83em 0 -0.44em #999999, 0 -0.83em 0 -0.46em #999999, 0 -0.83em 0 -0.477em #999999;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em #999999, -0.087em -0.825em 0 -0.42em #999999, -0.173em -0.812em 0 -0.44em #999999, -0.256em -0.789em 0 -0.46em #999999, -0.297em -0.775em 0 -0.477em #999999;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em #999999, -0.338em -0.758em 0 -0.42em #999999, -0.555em -0.617em 0 -0.44em #999999, -0.671em -0.488em 0 -0.46em #999999, -0.749em -0.34em 0 -0.477em #999999;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em #999999, -0.377em -0.74em 0 -0.42em #999999, -0.645em -0.522em 0 -0.44em #999999, -0.775em -0.297em 0 -0.46em #999999, -0.82em -0.09em 0 -0.477em #999999;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em #999999, 0 -0.83em 0 -0.42em #999999, 0 -0.83em 0 -0.44em #999999, 0 -0.83em 0 -0.46em #999999, 0 -0.83em 0 -0.477em #999999;
}
}
@keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em #999999, 0 -0.83em 0 -0.42em #999999, 0 -0.83em 0 -0.44em #999999, 0 -0.83em 0 -0.46em #999999, 0 -0.83em 0 -0.477em #999999;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em #999999, 0 -0.83em 0 -0.42em #999999, 0 -0.83em 0 -0.44em #999999, 0 -0.83em 0 -0.46em #999999, 0 -0.83em 0 -0.477em #999999;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em #999999, -0.087em -0.825em 0 -0.42em #999999, -0.173em -0.812em 0 -0.44em #999999, -0.256em -0.789em 0 -0.46em #999999, -0.297em -0.775em 0 -0.477em #999999;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em #999999, -0.338em -0.758em 0 -0.42em #999999, -0.555em -0.617em 0 -0.44em #999999, -0.671em -0.488em 0 -0.46em #999999, -0.749em -0.34em 0 -0.477em #999999;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em #999999, -0.377em -0.74em 0 -0.42em #999999, -0.645em -0.522em 0 -0.44em #999999, -0.775em -0.297em 0 -0.46em #999999, -0.82em -0.09em 0 -0.477em #999999;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em #999999, 0 -0.83em 0 -0.42em #999999, 0 -0.83em 0 -0.44em #999999, 0 -0.83em 0 -0.46em #999999, 0 -0.83em 0 -0.477em #999999;
}
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button id="button">Загрузить</button>
<div class="loader hide"></div>
</body>
</html>