Есть следующий код:
$('input[type="button"]').on('click', function(){
StartFill();
});
function StartFill() {
let timer = 1000*5;
$('.status').css('background', 'green');
$('#fill path')
.css('stroke-dasharray', '0, 251.2')
.animate({
'stroke-dasharray': '251.2, 251.2'
}, timer, 'linear', function(){
$('#fill path').css('stroke-dasharray', '0, 251.2');
$('.status').css('background', 'red');
});
}
#fill {
width: 150px;
height: 150px;
}
.status {
display: block;
width: 20px;
height: 20px;
background: red;
position: absolute;
left: 0;
top: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- -->
<svg id="fill" viewbox="0 0 100 100">
<path fill="none" stroke-linecap="round" stroke-width="5" stroke="#07f" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80">
</path>
</svg>
<div class="status"></div>
<br>
<input type="button" value="start">По задумке, при нажатии на кнопку "start" бордюр круга должен заполниться (как круговой прогресс бар).
Но он не хочет..
Думаю проблема в том, что .animate() не так "воспроизводит" "механику" stroke-dasharray.
Как можно "переиграть" данное действие?
P.s.
<animate> предлагать только в том случае, если можно "узнать" когда конец анимации.
<div class="status"> просто для визуального отображения того, что действие .animate() работает.
