Jquery UI Визуальный таймер

Question

коллеги,прошу помощи! нужно реализовать такую задачу: реализовать визуальный таймер 1 минуты в виде индикатора выполнения (полоса индикатора раз в секунду увеличивает свой размер, на 60 секунд достигает 100% заполнения и останавливается). После это выдает модальное сообщение «минута завершена» и кнопка «ок» (реализовать через плагин-виджет «диалоговое окно») Сам индикатор написал, с остановкой на 60 секунд. Но не могу ничего придумать с увеличением размера полосы раз в секунду, можете пожалуйста подсказать,спасибо!

  <div id="timerProgressBar">
    <div class="progressBar-inner">
     <div class="progress"></div>
    </div> 
   </div>


<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script src="https://snipp.ru/cdn/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="./jquery-ui-1.13.2/jquery-ui-1.13.2/jquery-ui.min.js"></script>
<script src="./jquery-ui-1.13.2/jquery-ui-1.13.2/"></script>
<link rel="stylesheet" href="./jquery-ui-1.13.2/jquery-ui-1.13.2/jquery-ui.min.css">
<!-- <script>
$('.accordion').accordion({
    heightStyle: 'content'
});
</script> -->

<script>
    $(document).ready(function(){
     $("#timerProgressBar .progress").progressbar({
      value: 0,
      max: 60
     });
     var timer = setInterval(function(){
      var value = $("#timerProgressBar .progress").progressbar("value");
      $("#timerProgressBar .progress").progressbar("value", value + 1);
      if (value == 60){
       clearInterval(timer);
      }
      
     },1000);
    });
    </script>

Answer 1

Можно же воспользоваться HTML тегом PROGRESS, как раз предназначенным для этого:

const progr = document.getElementById('timerProgressBar');

const time = setInterval(() => {
  progr.value++;
  if (progr.value === 60) clearInterval(time)
}, 1000);

<progress id='timerProgressBar' max=60 value=0 />

Answer 2

Коллеги,спасибо за помощь. Получилось так реализовать

<progress id="timerProgressBar" max="10" value="0" />

    <script>
      $(document).ready(function () {
        var barSize = 10 ;
        const progr = document.getElementById("timerProgressBar");
        const time = setInterval(() => {
          progr.value++;
          if (progr.value === 10) clearInterval(time);
          barSize += 1;
          $('#timerProgressBar').css('width', barSize + '%');
        }, 1000);
    });
    </script>

Answer 3

Теперь точно все реализовано таким образом! Всем спасибо

<script>
  $(document).ready(function () {
    var barSize = 0 ;
    const progr = document.getElementById("timerProgressBar");
    const time = setInterval(() => {
      progr.value++;
      if (progr.value === 60) clearInterval(time);
      barSize += 1;
      $('#timerProgressBar').css('width', barSize + '%');
    }, 1000);
});
</script>
<script>
    setTimeout(function() {
$('#dialog').dialog({buttons: [{text: "ок", click: function() {$(this).dialog("close")}},]});
},60000);
</script>
<div id="dialog" title="Диалоговое окно">
    минута завершена
</div>

БЛОГ НА HUSL

Jquery UI Визуальный таймер

Ответы (3 шт):