ตัวสร้าง Skeleton Loader

สร้าง skeleton loader ฟรี เลือกรูปแบบการ์ด รายการ โปรไฟล์ และบทความ พร้อม shimmer แล้วคัดลอก HTML กับ CSS ในเบราว์เซอร์

Loading tool...

ตัวสร้าง Skeleton Loader คืออะไร?

Skeleton Loader Generator เป็นเครื่องมือฟรีในเบราว์เซอร์ที่สร้าง CSS content placeholder คุณเลือกเลย์เอาต์การ์ด รายการ โปรไฟล์ หรือบทความ ตั้งสีและ shimmer แล้วคัดลอก HTML กับ CSS หรือดาวน์โหลด stylesheet

ประโยชน์หลัก

พรีวิว skeleton 4 แบบก่อนวางโค้ด
จับสีกระดูก สีไฮไลต์ ความโค้ง และความเร็ว shimmer
คัดลอก CSS, HTML หรือ snippet รวมในคลิกเดียว
สร้างบนอุปกรณ์ โดยไม่อัปโหลดไปเซิร์ฟเวอร์

กรณีการใช้งาน

•แสดงกริดการ์ดขณะโหลดข้อมูลสินค้า
•แถว placeholder ในรายการข้อความหรือตั้งค่า
•skeleton ส่วนหัวโปรไฟล์ในหน้าผู้ใช้
•placeholder เนื้อหาบทความในเลย์เอาต์บล็อก

วิธีใช้ Skeleton Loader Generator

เลือกเลย์เอาต์: เลือกการ์ด รายการ โปรไฟล์ หรือบทความ ตัวอย่างจะแสดงรูป placeholder ทันที
ปรับรูปลักษณ์: ตั้งจำนวนบรรทัด ความกว้าง ความโค้ง สีกระดูก และสีไฮไลต์ เปิดหรือปิด shimmer, รูป หรือ avatar เมื่อเลย์เอาต์นั้นใช้ เปลี่ยนชื่อคลาส CSS หากต้องการ selector ที่ไม่ซ้ำ
ดูตัวอย่าง: สลับพื้นสว่างหรือพื้นมืดเพื่อดู contrast ปรับความเร็ว shimmer จนเข้ากับ UI
คัดลอกโค้ด: คัดลอก CSS, HTML หรือ snippet รวม หรือดาวน์โหลด skeleton.css แล้ววางใน stylesheet และ markup

คุณสมบัติหลัก

4 เลย์เอาต์: การ์ด รายการ โปรไฟล์ และบทความ พร้อมรูปหรือ avatar ตามต้องการ
ตัวอย่างสดพร้อมพื้นหลังสว่างและมืด
ปรับบรรทัด ความกว้าง ความโค้ง สี shimmer และชื่อคลาส
คัดลอก CSS, HTML หรือ snippet รวม และดาวน์โหลดไฟล์ CSS
รันในเบราว์เซอร์ทั้งหมด โดยไม่อัปโหลด

คำถามที่พบบ่อย

ต้องใช้ JavaScript สำหรับ skeleton loader นี้ไหม?

ไม่ ผลลัพธ์เป็น CSS อย่างเดียว ใช้ keyframes สำหรับ shimmer และ div ว่างสำหรับกระดูก วาง HTML กับ CSS ได้เลย ไม่ต้องมีสคริปต์เพื่อให้ขยับ

จะทำ skeleton ให้เข้าถึงได้ได้อย่างไร?

HTML ที่สร้างมี role status, aria-busy และ aria-label เป็น Loading คง markup นั้นไว้ขณะโหลด แล้วแทนที่ด้วยเนื้อหาจริง

shimmer จะรบกวนผู้ที่ต้องการลดแอนิเมชันไหม?

CSS มีกฎ prefers-reduced-motion ที่ปิดแอนิเมชัน shimmer คุณยังปิด shimmer ในเครื่องมือก่อนคัดลอกโค้ดได้

CSS ของฉันออกจากหน้านี้ไหม?

ไม่ การสร้างและพรีวิวรันในเบราว์เซอร์ คัดลอกหรือดาวน์โหลดโค้ดได้หลังจากโหลดหน้าแล้ว รวมถึงแบบออฟไลน์

คู่มือฉบับละเอียด

Skeleton Loader Generator: สร้าง placeholder แบบ shimmer ให้การโหลดรู้สึกลื่นขึ้นทันที

อ่านคู่มือฉบับเต็ม →

ตัวสร้าง Skeleton Loader

เลือกเลย์เอาต์ ปรับจำนวนบรรทัด สี และ shimmer แล้วคัดลอก HTML กับ CSS ตัวอย่างอัปเดตตามที่คุณปรับ

เลย์เอาต์

บรรทัด (3)

ความกว้าง (360px)

ความโค้ง (8px)

ความเร็ว (1.4s)

คลาส CSS

ใช้ได้เฉพาะตัวอักษร ตัวเลข ขีดล่าง และขีดกลาง ชื่อที่ไม่ถูกต้องจะกลับเป็น skel

สีฐาน

สีไฮไลต์

Shimmer

บล็อกรูป

ตัวอย่างสด

CSS ที่สร้าง

.skel {
  box-sizing: border-box;
  width: 360px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skel *,
.skel *::before,
.skel *::after {
  box-sizing: border-box;
}
.skel__bone {
  background-color: #e5e7eb;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.skel__image {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.skel__line {
  height: 12px;
}
.skel__title {
  height: 20px;
}
.skel__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skel__avatar--lg {
  width: 72px;
  height: 72px;
}
.skel__row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.skel__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skel--profile {
  align-items: center;
}
.skel--profile .skel__line {
  align-self: stretch;
}
.skel--shimmer .skel__bone::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, #f3f4f6, transparent);
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes skel-shimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skel--shimmer .skel__bone::after {
    animation: none;
  }
}

<div class="skel skel--card skel--shimmer" role="status" aria-busy="true" aria-label="Loading"><div class="skel__bone skel__image"></div><div class="skel__bone skel__line" style="width:92%"></div><div class="skel__bone skel__line" style="width:78%"></div><div class="skel__bone skel__line" style="width:64%"></div></div>

เกี่ยวกับ Skeleton Loader Generator

เครื่องมือนี้สร้าง skeleton loader ด้วย CSS ล้วน วางในหน้าใดก็ได้ เลือกการ์ด รายการ โปรไฟล์ หรือบทความ แล้วตั้งจำนวนบรรทัด ความกว้าง ความโค้ง สี และ shimmer ตัวอย่างสดแสดงตัว placeholder คัดลอก CSS, HTML หรือ snippet รวม หรือดาวน์โหลดไฟล์ .css ทุกอย่างรันในเบราว์เซอร์ โดยไม่อัปโหลด

ทำไมต้องใช้เครื่องมือนี้

•ได้ CSS skeleton พร้อมวาง โดยไม่ต้องไล่หาจากเว็บ snippet
•พรีวิวรูปการ์ด รายการ โปรไฟล์ และบทความบนพื้นสว่างหรือมืด
•ปรับสีกระดูก สีไฮไลต์ ความโค้ง และความเร็ว shimmer ให้เข้ากับ UI
•ใช้ชื่อคลาส CSS ที่ปลอดภัย เพื่อไม่ให้ snippet พัง stylesheet
•เป็นส่วนตัว: CSS ถูกสร้างในหน้านี้ และไม่ถูกส่งไปเซิร์ฟเวอร์

คุณสมบัติ

✓4 เลย์เอาต์: การ์ด รายการ โปรไฟล์ และบทความ พร้อมรูปหรือ avatar ตามต้องการ
✓ตัวอย่างสดพร้อมพื้นหลังสว่างและมืด
✓ปรับบรรทัด ความกว้าง ความโค้ง สี shimmer และชื่อคลาส
✓คัดลอก CSS, HTML หรือ snippet รวม และดาวน์โหลดไฟล์ CSS
✓รันในเบราว์เซอร์ทั้งหมด โดยไม่อัปโหลด

Loading tool...