Thanh Progress cho biết tiến trình nào đó đã thực hiện đến đâu. Progress hoạt động như sau:

Tùy biến Progress bằng cách thiết lập nền cho .progress-bar với các màu nền .bg-*, chiều cao thì thiết lập tại .progress bằng CSS phù hợp

Ví dụ thanh Progress cho cho biết đang ở 25%, với nhãn thông báo Hoàn thành 25%

<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        Hoàn thành 25%
    </div>
</div>
Hoàn thành 25%

Ví dụ thanh Progress cho cho biết đang ở 60%, với nhãn thông báo Hoàn thành 60%, có thiết lập chiều cao 50px

<div class="progress" style="height: 50px">
    <div class="progress-bar bg-danger" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        Hoàn thành 25%
    </div>
</div>
Hoàn thành 25%

Như vậy mỗi khi muốn thay đổi progress cần thiết độ rộng cho progress-bar căn cứ các thuộc tính của nó, có thể làm việc này thông qua JS

Ví dụ: JS sau sẽ đếm 0,3s một lần và mỗi lần sẽ tăng 1% progress

<div class="progress" style="height: 30px">
    <div id="myprogress" class="progress-bar bg-dark" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
        
    </div>
</div>
<button class="btn btn-success mt-4" onclick="setprogress()">Chạy thử</button>
<script>
function setprogress() {
    console.log('setprogress');
    var current_value = parseInt($('#myprogress').attr('aria-valuenow'));
    if (current_value >=100)
    {
        return;
    }
    else {
        current_value++;
        $('#myprogress')
            .attr({'aria-valuenow':current_value})
            .text('Hoàn thành '+current_value+' %')
            .css({'width':current_value+'%'})

    }

    setTimeout(setprogress,100)
}
</script>

Đăng ký nhận bài viết mới