<div style="visibility: hidden" id='prg_div' class="alert alert-light col-md-12" role="alert">
    <h3 id='prg_info'>串流處理中請稍後...</h3>
    <div class="progress">
        <div id="progress" class="alert alert-info bg-primary" style="width: 0"></div>
    </div>
</div>

<script>
    bar=document.getElementById('progress');
    w=0
    function fuck2(){
        w+=(100/sec);
        bar.style.width=w+'%';

        if ((100/sec)*(sec-2) <w){
            clearInterval(Sti);
        }
    }
    function fuck(){
        Sti=setInterval(fuck2,1000)
    }

    function proset(nums){
        bar.classList.remove('bg-success')
        bar.classList.remove('bg-danger')
        document.getElementById('prg_info').innerHTML='串流處理中請稍後...';
        w=0
        bar.style.width=w+'%';
        sec=nums*3;
        Sto=setTimeout(fuck(),1000);
    }
    function completed(){
        bar.style.width='100%';
        bar.classList.add('bg-success');
        document.getElementById('prg_info').innerHTML='處理完成！～';
        clearInterval(Sto);
        clearInterval(Sti);
    }

    function failure(){
        bar.style.width='100%';
        bar.classList.add('bg-danger');
        document.getElementById('prg_info').innerHTML='發生問題！！～  ：（伺服器發生未知問題）';
        clearInterval(Sto);
        clearInterval(Sti);
    }
</script>
