Jquery UI Визуальный таймер
коллеги,прошу помощи! нужно реализовать такую задачу: реализовать визуальный таймер 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>
Источник: Stack Overflow на русском