การสร้าง 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 ปกติได้เลยครับ