การสร้าง PRELOADER ในสมัยนี้มีการพัฒนาโดยใช้ css กันเยอะมากขึ้นมีรูปแบบที่แตกต่างกันออกไป ทำให้เวลาเข้าชมเว็บไซต์แล้วรอโหลดน่าเพจมีความสนุกสนานไม่น่าเบื่อจนเกินไป

วันนี้แอดมิน รวบรวมไอเดียการสร้าง PRELOADER สำหรับโหลดหน้าเพจ จาก Codepen มาฝากแฟนๆ GDB กันจ้า ไปดูกันว่ามีไอเดียยังไงบ้าง

Loading Micro Animation

เป็น PRELOADER ที่ออกแบบให้เป็นเหมือนเครื่องจักรที่ผลิตเครื่องดื่มบรรจุขวด ออกแบบได้สวยและไม่ซ้ำใคร


Bookshelf loader

อนิเมชั่นชั้นวางหนังสือที่เรียงรายกันเป็นแถวๆมีเล่มหนังสือโพล่ขึ้นมาและหายไป


ironing

อนิเมชั่นการรีดผ้า เหมาะมากสำหรับเว็บไซต์ที่รับซักรีดต่างๆ


Rainbow Rotating Dots

การสร้างจุดให้มีหลากสีสันเหมือนสีรุ้งให้มีเคลื่อนไหวหมุนวนไปมา


Loader a Day (day 2)

เป็นอีกอนิเมชั่นที่น่าสนใจ มีการเปลี่ยนจากหน้าจอ pc ไปเป็น แท็บเล็ตและมือถือ


Rubik loader

เป็น PRELOADER รูบิกที่บิดวนไปมา


DNA Animation

การใช้ css แสดงถึงโครงสร้าง DNA ที่เคลื่อนไหวไปมา


Project Deadline

เป็นอีกอนิเมชั่นที่แอดมินชอบ มีการดีไซน์ที่แปลกแต่มีความสวยงาม สื่อถึงการกำหนดเส้นตายโปรเจค


SVG Car Drift Loader

PRELOADER การดริฟท์รถ เหมาะที่จะนำไปใช้กับเว็บไซต์รถยนต์ต่างๆ


ดูตัวอย่าง PRELOADER กันไปเยอะแล้ว ชอบแบบไหนลองนำไปใช้กับเว็บไซต์ของคุณดูนะค่ะ

ขอบคุณข้อมูล http://photoshopvip.net
ขอบคุณข้อมูล Codepen
เรียบเรียงโดย YUDYMOVEE

Comments