เจเนเรเตอร์โหลดเดอร์ CSS
เจเนเรเตอร์โหลดเดอร์ CSS ฟรี สปินเนอร์โหลดแบบ CSS ล้วน 10 แบบ ปรับขนาด ความเร็ว ความหนา สี ได้สด ๆ แล้วคัดลอก HTML และ CSS ไปใช้ได้เลย
เจเนเรเตอร์โหลดเดอร์ CSS สร้างอะไร?
สร้างตัวบอกสถานะโหลดแบบเคลื่อนไหวด้วย CSS ล้วน ได้แก่ สปินเนอร์ จุด แท่ง ระลอก พัลส์ วงโคจร พลิก คลื่น เด้ง และวงแหวนไล่เฉด แต่ละตัวสร้างตามขนาด ความเร็ว ความหนา และสีที่เลือก พร้อมคัดลอกเป็น HTML บวก CSS
โหลดเดอร์ต้องใช้ JavaScript หรือรูปภาพไหม?
ไม่ต้อง ทุกโหลดเดอร์เป็นเอลิเมนต์ HTML ธรรมดาที่ขับเคลื่อนด้วยคีย์เฟรม CSS ไม่มีรูป ฟอนต์ไอคอน ไลบรารี หรือสคริปต์ขณะรัน — มีบล็อก CSS บล็อกเดียวก็พอ
เอาโหลดเดอร์ไปใส่เว็บยังไง?
คลิกโหลดเดอร์ในกริด แล้วคัดลอกบล็อก HTML ไปวางตำแหน่งที่ต้องการให้แสดง จากนั้นวางบล็อก CSS ลงสไตล์ชีต CSS สมบูรณ์ในตัวและมีกฎ @keyframes ที่จำเป็นมาให้ครบแล้ว
พารามิเตอร์ทั้งสี่ปรับอะไรบ้าง?
ขนาดกำหนดกว้าง-สูงของทุกโหลดเดอร์ ความเร็วเปลี่ยนระยะเวลาแอนิเมชัน ความหนากระทบเส้นขอบและความกว้างแท่ง สีจะระบายทุกเอลิเมนต์ในกริดและในโค้ดทันที
ทำไมโหลดเดอร์ที่คัดลอกไปแล้วไม่ขยับ?
สาเหตุที่พบบ่อยคือคัดลอกเฉพาะกฎคลาสแต่ลืมบล็อก @keyframes หรือเปลี่ยนชื่อคลาสใน HTML แต่ไม่ได้แก้ใน CSS ให้คัดลอกทั้งสองบล็อกตามที่สร้างให้และคงชื่อคลาสเดิม
แอนิเมชันประสิทธิภาพเป็นอย่างไร?
ดีมาก ทุกโหลดเดอร์เคลื่อนเพียง transform และ opacity ซึ่งเบราว์เซอร์จะประกอบภาพบน GPU โดยไม่จุดชนวน layout หรือ paint แม้ใส่หลายตัวในหน้าเดียวก็ลื่น
เรื่องการเข้าถึงเป็นอย่างไร?
สปินเนอร์เป็นของตกแต่งสายตา ผู้ใช้สกรีนรีดเดอร์จะช่วยได้ด้วยข้อความกำกับ ใส่ป้ายซ่อนไว้ เช่น "กำลังโหลด" ถัดจากโหลดเดอร์ หรือใส่ aria-hidden="true" ให้โหลดเดอร์แล้วแจ้งความคืบหน้าแยกต่างหาก
มีการอัปโหลดข้อมูลขึ้นเซิร์ฟเวอร์ไหม?
ไม่มี ตัวสร้างทำงานในเบราว์เซอร์ทั้งหมด การตั้งค่าของคุณไม่เคยออกจากหน้าเว็บ และโค้ดที่สร้างได้ประกอบขึ้นในเครื่องคุณเอง
วิธีใช้ เจเนเรเตอร์โหลดเดอร์ CSS
ตัวสร้าง CSS Loader สร้างสปินเนอร์โหลดแบบเคลื่อนไหวด้วย CSS ล้วน ๆ — ไม่ใช้รูป ไม่ใช้ JavaScript ไม่มี dependency เลือกหนึ่งจากสิบสไตล์ ปรับขนาด ความเร็ว ความหนา และสี แล้วคัดลอก HTML กับ CSS ที่สร้างได้ตรงเข้าโปรเจกต์ของคุณ
- ปรับพารามิเตอร์รวมด้วยตัวควบคุมสี่ตัว: ขนาดกำหนดกล่องของแต่ละโหลเดอร์ ความเร็วเปลี่ยนระยะเวลาอนิเมชัน ความหนาควบคุมขอบและความกว้างแถบ และสีระบายทุกองค์ประกอบ
- เลื่อนดูกริด: โหลเดอร์ทั้งสิบตัวยังเคลื่อนไหวสด ๆ ตามการตั้งค่าปัจจุบัน เทียบกันได้ในพริบตา คลิกโหลเดอร์ใดก็ได้เพื่อเลือก
- แผงรายละเอียดแสดงโหลเดอร์ที่เลือกขนาดใหญ่ขึ้น พร้อมสนิปเปต HTML และ CSS ที่ตรงกัน (รวม @keyframes ที่จำเป็น)
- กดคัดลอก HTML หรือคัดลอก CSS เพื่อส่งแต่ละบล็อกไปยังคลิปบอร์ด CSS เป็นแบบอิสระสมบูรณ์ — วางลงสไตล์ชีต แล้ววาง HTML ไว้ที่ที่โหลเดอร์ควรปรากฏ
- เปลี่ยนพารามิเตอร์ใดก็ได้ กริด พรีวิวรายละเอียด และโค้ดทั้งสองบล็อกจะอัปเดตทันที
เพราะเป็น CSS ล้วน โหลเดอร์แทบไม่กินแบนด์วิดท์และคมชัดบนทุกจอ ควรคู่อนิเมชันด้วยป้ายข้อความเพื่อการเข้าถึง และหลีกเลี่ยงระยะเวลาต่ำกว่าราว 0.5 วินาที — สปินเนอร์ที่กะพริบเร็วเกินไปให้ความวิตกมากกว่าความอุ่นใจ
เครื่องมือที่เกี่ยวข้อง
- ตัวบีบอัด CSS ตัวบีบอัด CSS ออนไลน์ฟรี บีบอัดและเพิ่มประสิทธิภาพโค้ด CSS ทันทีโดยลบช่องว่าง ความคิดเห็น และอักขระที่ไม่จำเป็น ลดขนาดไฟล์เพื่อประสิทธิภาพเว็บที่เร็วขึ้น
- จัดรูปแบบ CSS จัดรูปแบบและทำให้โค้ด CSS สวยงามทันที แปลง CSS ที่บีบอัดเป็นโค้ดที่อ่านง่ายพร้อมตัวเลือกที่ปรับได้
- ตัวสร้าง Border Radius ตัวสร้างขอบมนสร้างสรรค์ออนไลน์ฟรี ลากจุดจับทั้งแปดหรือเลือกรูปทรงบล็อบสำเร็จรูป เพื่อสร้างรูปทรง CSS อินทรีย์และคัดลอกโค้ดได้ทันที
- ตัวแปลงสี ตัวแปลงสีออนไลน์ฟรี แปลงรูปแบบ HEX, RGB, HSL, HSV ทันทีด้วยตัวเลือกภาพ 100% ส่วนตัว ทำงานในเบราว์เซอร์ของคุณ
- ตัวสร้าง CSS Easing ตัวสร้าง easing CSS ออนไลน์ฟรี ลากจุดควบคุม cubic-bezier บนเส้นโค้งอินเทอร์แอกทีฟ เลือกจากพรีเซ็ต 18 แบบ ดูตัวอย่างลูกบอลวนซ้ำ แล้วคัดลอกฟังก์ชันจังหวะเวลาทันที
- ตัวสร้าง Text Shadow CSS ตัวสร้าง text-shadow CSS ออนไลน์ฟรี ซ้อนหลายเลเยอร์เงาพร้อมปรับออฟเซ็ต เบลอ สี และความทึบ ลองพรีเซ็ตนีออน 3D เรโทร แล้วคัดลอกโค้ด CSS ทันที
- ตัวสร้าง CSS Clip Path ตัวสร้าง clip-path CSS ออนไลน์ฟรี ออกแบบรูปทรง polygon, circle, ellipse และ inset ด้วยจุดที่ลากได้ พร้อมตัวอย่างสดและคัดลอกโค้ด CSS คลิกเดียว
- ตัวสร้าง Border Radius CSS ตัวสร้าง border-radius CSS แบบภาพ ปรับแต่ละมุมอย่างอิสระพร้อมดูตัวอย่างแบบเรียลไทม์และคัดลอกโค้ด CSS ทันที