Tạo thanh progress với Bootstrap

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

• Một phần tử chứa .progress độ rộng của nó cho biết giá trị lớn nhất của quá trình.
• Bên trong .progress chứa phần tử .progress-bar cho biết giá trị hiện tại, nó là phần tử hiện thị dạng inline, nên cần thiết lập độ rộng cho nó (dùng inline CSS). Để cho biết giá trị hiện tại dùng thuộc tính aria-valuenow="", giá trị lớn nhất aria-valuemax="", giá trị nhỏ nhất aria-valuemin=""

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>

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>

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>