bootstrap4 给进度条动态赋值

有如下进度条：

<div class="progress"> <div class="progress-bar" style="width:70%"></div>

</div>

编写js代码：

<script>

var i=0;

$(document).ready(function(){

setInterval(pro,500)

})

function pro(){

$('.progress-bar').css('width',i+'%')

i++

if(i%2){

i=i+10

}

if(i>=100)

{i=100}

$('.progress-bar').text(i+'%')

}

</script>

效果为进度条逐渐变长，百分比到100%为止。