Например можно реализовать как-то так (в примере на самом деле два прогрессбара). К сожалению всёж пока выходит сложнее для чтения и понимания чем «чистый» javascript+jquery
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<table id="hotels_list"></table>
<div id="hotels_pager"></div>
<div id="app">
<div class="container">
<div class="row">
<div class="col-6">
<persent v-bind:msg="pers1"></persent>
</div>
<div class="col-6">
<persent v-bind:msg="pers2"></persent>
</div>
</div>
</div>
</div>
<script>
Vue.component('persent', {
props: ['msg'],
template: '<div><div>{{ msg.txt }}</div><div class="progress"><div class="progress-bar" role="progressbar" :style="msg.style" :aria-valuenow="msg.value" aria-valuemin="0" aria-valuemax="100">{{ msg.value }}%</div></div></div>'
});
var app = new Vue({
el: '#app',
data: {
timing: null,
pers1 : {
value: 10,
txt:'Добавление новых',
style:'width:20%'
},
pers2 : {
value: 70,
txt:'Обновление',
style:'width:70%'
}
},
mounted(){
console.log("-загрузились полностью..");
this.runTiming();
},
methods: {
runTiming() {
this.timing = setInterval(this.changeCurrentPers, 2000)
},
changeCurrentPers(){
vl=this;
$.post('progress.txt',{}, function(data){
vl.pers1.value=data;
vl.pers1.style='width:'+data+'%';
});
$.post('progress_update.txt',{}, function(data){
vl.pers2.value=data;
vl.pers2.style='width:'+data+'%';
});
}
},
});
Всё ищу, гдеб его (VUE.js) можно применить.. Пока выходит «надумано»..