การสร้าง Loader ด้วย Vanilla JavaScript และ PHP

การสร้าง Loader เพื่อช่วยแจ้งสถานะการโหลดข้อมูลให้ผู้ใช้ทราบ บทความนี้ผมจะพาคุณสร้าง Loader ที่สวยงามและใช้งานง่ายโดยใช้ HTML, CSS, และ JavaScript ล้วน ๆ (Vanilla JS) ซึ่งเหมาะสำหรับใช้งานใน PHP หรือเว็บที่ไม่ใช้ Framework อย่าง React หรือ Vue

ส่วนประกอบของ Loader

Loader ของเราจะแบ่งเป็น 3 ส่วนหลัก

HTML: แสดงโครงสร้าง Loader
CSS: เพิ่มความสวยงามให้ Loader
JavaScript: ควบคุมสถานะการแสดงผลของ Loader

สร้าง HTML สำหรับ Loader

นี่คือโครงสร้าง HTML ของ Loader ซึ่งจะถูกซ่อนเริ่มต้น

<!-- loader.html -->
<div class="overlay">
    <div class="spanner">
        <div class="loader"></div>
        <p>กรุณารอสักครู่...</p>
    </div>
</div>

เพิ่ม CSS เพื่อความสวยงาม

ใช้ CSS ทำให้ Loader ดูน่าสนใจและอยู่ตรงกลางหน้าจอ:

/* loader.css */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none; /* ซ่อน Loader เริ่มต้น */
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.overlay.visible {
    display: flex; /* แสดง Loader เมื่อ active */
}

.spanner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #fff;
}

.loader {
    border: 4px solid #f3f3f3;
    border-radius: 50%;
    border-top: 4px solid #189A92;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

ควบคุม Loader ด้วย JavaScript

สร้างฟังก์ชันในไฟล์ loader.js เพื่อเปิด/ปิด Loader

// loader.js
const Loader = (function () {
    return {
        show: function () {
            document.querySelector('.overlay').classList.add('visible');
        },
        hide: function () {
            document.querySelector('.overlay').classList.remove('visible');
        },
    };
})();

การใช้งาน Loader

ในไฟล์ main.js เราจะเรียก Loader เมื่อทำงานกับ API หรือกระบวนการที่ต้องรอข้อมูล

// main.js
document.addEventListener('DOMContentLoaded', function () {
    const fetchData = async (url) => {
        try {
            Loader.show(); // แสดง Loader
            const response = await fetch(url);
            const data = await response.json();
            console.log(data); // ใช้งานข้อมูล
        } catch (error) {
            console.error('Error fetching data:', error);
        } finally {
            Loader.hide(); // ซ่อน Loader
        }
    };

    document.querySelector('#fetch-button').addEventListener('click', () => {
        fetchData('https://api.example.com/data');
    });
});

นำไปใช้งานใน PHP

รวมทุกไฟล์ใน PHP Template

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="loader.css">
</head>
<body>
    <button id="fetch-button">โหลดข้อมูล</button>
    <?php include 'loader.html'; ?>
    <script src="loader.js"></script>
    <script src="main.js"></script>
</body>
</html>

ตัวอย่างการใช้งาน

เมื่อผู้ใช้กดปุ่ม "โหลดข้อมูล" ระบบจะ

แสดงข้อความ "กรุณารอสักครู่..."
ดึงข้อมูลจาก API (เช่น https://api.example.com/data)
ซ่อน Loader เมื่อโหลดข้อมูลเสร็จ

สรุป

Loader คือเครื่องมือสำคัญที่ช่วยแจ้งสถานะการโหลดข้อมูลให้ผู้ใช้งานทราบ โดยในบทความนี้เราได้เรียนรู้วิธีสร้าง Loader ง่าย ๆ ด้วย HTML, CSS, และ JavaScript พร้อมตัวอย่างการนำไปใช้งานใน PHP หรือ HTML Template ปกติได้เลยครับ

Tags: JavaScript, PHP, Loader, Frontend