JQuery Прогресс бар анимация

Question

Попытка отобразить индикатор выполнения с помощью jquery и javascript, но он не отображается.

var show_time = Math.floor(Math.random() * 10000) + 5000;

setTimeout(function() {
  $("#progress").hide()
}, show_time);

var myCountdown = $('#progress').progressBarTimer({
  autostart: true, // default false
  timeLimit: show_time,
  baseStyle: 'bg-info',
  completeStyle: 'bg-success',
  animated: true,
  striped: true,
  label: {
    show: true,
    type: 'percent'
  }
});

<!-- Stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<br /><br /><br />
<div id="progress"></div>

<script src="https://www.jqueryscript.net/demo/Countdown-Timers-Bootstrap-4-Progressbar/jquery.progressBarTimer.js"></script>

Показывает только бар, в этом ничего не происходит.

Answer 1

Из-за неправильно названного свойства:

autostart

Переименуйте его в:

autoStart

В противном случае вы должны запустить индикатор выполнения вручную, используя start:

$("#countdown").progressBarTimer({
  timeLimit: 60,
  warningThreshold: 5,
  autoStart: false,
  onFinish  : function () { console.log('completed') }
}).start()

Хотя он также должен работать с использованием outstart в соответствии с документацией о том, как настроить этот индикатор, вы можете увидеть здесь , что это свойство должно называться autoStart.

И обратите внимание, что существует обратный вызов onFinish, который можно использовать для выполнения каких-либо действий после завершения индикатора выполнения, поэтому используйте это свойство вместо отдельного setTimeout, чтобы впоследствии скрыть индикатор выполнения. И timeLimit ожидает значение в секундах, а не в миллисекундах. Чтобы ваши пользователи не ждали слишком долго, вам может подойти эта операция:

Math.floor(Math.random() * 10) + 5;

Этот пример показывает, что я имею в виду:

var show_time = Math.floor(Math.random() * 10) + 5;

var myCountdown = $('#progress').progressBarTimer({
  autoStart: true, // default false
  timeLimit: show_time,
  baseStyle: 'bg-info',
  completeStyle: 'bg-success',
  animated: true,
  striped: true,
  onFinish  : function () { 
      setTimeout(function() {
          $("#progress").hide()
      }, 1000);
  },
  label: {
    show: true,
    type: 'percent'
  }
});

<!-- Stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div id="progress"></div>

<script src="https://www.jqueryscript.net/demo/Countdown-Timers-Bootstrap-4-Progressbar/jquery.progressBarTimer.js"></script>