-1

Приветствую! Помогите новичку. Как сделать кнопку с имитацией загрузки (в течение 3-5 секунд), по типу как здесь Анимация при нажатии кнопки

Но чтобы после окончания имитации загрузки, рядом (или ниже) с кнопкой выдавалось определенное сообщение текстом?

6
  • а что именно загружается?
    – Umer
    Commented 6 дек. 2015 в 19:24
  • Ничего. Я же написал "имитация загрузки". Так скажем просто 3-5 секундная пауза, во время которой крутится колесико загрузки или полоса загрузки без разницы... а потом анимация загрузки исчезает и рядом появляется надпись (только не спрашивайте какая :) ) Commented 6 дек. 2015 в 19:28
  • так в приведенном примере уже все есть - просто добавьте текст и все
    – Grundy
    Commented 6 дек. 2015 в 19:54
  • Что правда? Ну надо же))) Commented 7 дек. 2015 в 7:49
  • Уважаемый, если бы я знал, как и что и куда добавить, я бы не лез на кодерский ресурс за помощью. Если для вас это так просто, то не выложите мне готовый вариант? Commented 7 дек. 2015 в 7:50

1 ответ 1

2

Надеюсь я правильно понял Вопрос. Троблер взял css-ный не ругайтесь.

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>

31
  • Bear GRiZZLY Xi, Да!!! Спасибо огромное!! Это именно то, что надо. Кнопку то я сам заменю - не проблема)) Единственное, подскажите нубу пожалуйста, куда вставлять первые два блока? Последний я понял, что в html-страницу. Commented 9 дек. 2015 в 8:42
  • Простите не до конца понял фразу "куда вставлять первые два блока"? Вы имели ввиду: <button id="button">Загрузить</button> <div class="loader hide"></div> Или что то другое? Commented 9 дек. 2015 в 9:30
  • Так по ходу дела вы (@Алексей) про JS и CSS? Их можно положить рядом в файлах mani.js для JS и style.css для CSS затем в секции <head> добавить <script src="main.js"></script> для JS и <link rel="stylesheet" type="text/css" href="style.css" /> Commented 9 дек. 2015 в 9:31
  • @Алексей Если я Вам помог нажмите стрелочку вверх около моего ответа или пометку что этот ответ помог :-) Мне будет приятно. Commented 9 дек. 2015 в 9:38
  • А если уже есть файл style.css, то можно ли добавить Ваши строки в него? Или лучше создать и подключить новый css-файл? Извиняюсь за нубство. Commented 9 дек. 2015 в 9:38

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.