รอโหลด PHP ด้วย Bootstrap และ jQuery

รอโหลด PHP ด้วย Bootstrap และ jQuery บทความนี้สอนเขียนโค้ดรอโหลดด้วยชุดคำสั่ง Progress ของ Bootstrap Framework ร่วมกับ jQuery สำหรับสร้างแถบรอโหลดข้อมูล พร้อมสถานะโหลดข้อมูลเสร็จ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง รอโหลด PHP ด้วย Bootstrap และ jQuery

<div class="progress" style="margin: .5rem">
  <div id="load" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemax="100"></div>
</div>
<div id="result">กำลังโหลด</div>

<script>
    let l = 0;
    var load = setInterval(() => {
        l += 10;
        $("#load").width( l+"%" );
        if( l >= 100 ) {
            clearInterval( load );
            $("#result").html( "โหลดเสร็จแล้ว" );
        }
    }, 500);
</script>

รอโหลด PHP ด้วย Bootstrap และ jQuery มีรายละเอียด และขั้นตอนดำเนินการดังนี้

1. สร้าง Progress หรือแทบรอโหลด ด้วย Bootstrap กำหนด id=load และกำหนด id=result กับ div เพื่อแสดงข้อความสถาะรอโหลด

2. ใน JavaScript สำหรับตัวแปร l = 0 จากนั้นใช้คำสั่ง setInterval เพื่อให้แทบรอโหลดอัพเดททุกๆ 500 มิลลิวินาที (ประมาณครึ่งวินาที)

3. ทุกครั้งที่อัพเดทแทบรอโหลด ตัวแปร l จะบวกค่าเพิ่มทีละ 10 และนำไปแสดงที่แทบรอโหลดผ่าน id=load ด้วยคำสั่ง width กำหนดเป็นหน่วย %

4. กรณีถ้าโหลดครบ 100 ให้ใช้คำสั่ง clearInterval ยกเลิกคำสั่ง setInterval และแสดงข้อความ “โหลดเสร็จแล้ว” ที่ div id=result