Loading Progress with NProgress

วันนี้จะมาแนะนำวิธีการทำ Loading ด้วย NProgress นะครับ หลายคนอาจจะยังไม่ภาพไม่ออกว่า NProgress นี่ทำ Loading แล้วจะมีหน้าตาออกมาเป็นแบบไหน ให้ไปลองดูที่ Youtube นะครับเมื่อเราเข้ามาแล้วจะมี Loading เล็กวิ่งอยู่ด้านบนสุด

ซึ่งเราสามารถนำ NProgress นี่เข้ามาใช้งานบนเว็บไซต์ของเราได้ไม่ยาก โดยสามารถทำได้ ดังนี้ครับ

เข้าไปที่ http://ricostacruz.com/nprogress/ เพื่อดาวน์โหลด nprogress.css และ nprogress.js มาไว้ใน Solution ในตัวอย่างนี้ผมขอใช้ผ่าน CDN ดังนี้ครับ

<link href="http://ricostacruz.com/nprogress/nprogress.css"

    rel="stylesheet" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"

    type="text/javascript"></script>

<script src="http://ricostacruz.com/nprogress/nprogress.js"

    type="text/javascript"></script>

เท่านี้เราก็ติดตั้ง NProgress เสร็จเรียบร้อยแล้วครับ ต่อมาจะเริ่มใช้งานกันนะครับ โดยมี 2 คำสั่งที่จำเป็นในการใช้งาน คือ NProgress.start(); เพื่อใช้สำหรับสั่งให้ Progress Bar เริ่มทำงาน และ NProgress.done(); เพื่อใช้สำหรับสั่งให้ Progress Bar สิ้นสุดการทำงาน

เริ่มทดสอบการทำงานโดยใช้ Code นี้นะครับ

<script>

    $(document).ready(function () {

        NProgress.start();

        setTimeout(function () {

            NProgress.done();

            $('.fade').removeClass('out');

        }, 1000);

    });

</script>

หลังจากลอง Run แล้วจะมี Loading แสดงขึ้นมา เท่านี้ก็เสร็จแล้วครับกับการใช้ NProgress สำหรับทำ Loading