วิธีสร้าง Loading Icon ด้วย Ionic SVG Spinner

หากติดตามวิดีโอของโค้ชพลมาตั้งแต่ Ionic ยังไม่ถึงรุ่น 1.0 จะเห็นว่าตัวไอคอน Spinner ที่ใช้แสดงตอนโหลดข้อมูลของพวกเรา จะใช้ Font Icon แบบเคลื่อนไหวมาตลอด

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

แต่พอ Ionic Framework ขึ้น 1.0 RC ทางทีมพัฒนาก็ได้เพิ่ม Loading Icon แบบ SVG เข้ามาครับ

SVG Spinner ใน Ionic Framework 1.0 RC1+

[codepen_embed theme_id=1 slug_hash=’OPaxME’ default_tab=’result’ animations=’run’ height=”300″] [/codepen_embed]

เนื่องจาก Font Icon ไม่สามารถรับประกันความแน่นอนในแต่ละ platform (เรื่องของการรองรับบน Web Browser แบบต่างๆ) ทำให้ทางทีมพัฒนา Ionic framework ตัดสินใจที่จะเพิ่ม Spinner icon แบบ SVG เข้ามาใช้งานครับ

ซึ่งแทนที่นักพัฒนาต้องมาปวดหัวกับการใช้ SVG Markup แบบพื้นฐาน ทีมงานจึงตัดสินใจสร้าง Angular Directive ขึ้นมาให้ใช้ในชื่อของ ion-spinner  เพื่อให้คนที่คุ้นเคยกับระบบ Angular JS (หรือ Angular 2 ในอนาคต) สามารถใช้งานได้ทันที

โดย Angular Directive ion-spinner  สามารถใช้ได้ตั้งแต่ Ionic Framework รุ่น 1.0 RC1 เป็นต้นไปครับ

วิธีใช้งาน ion-spinner

 A. ใส่ spinner ลงใน Mobile page

Ionic spinner มาในรูปแบบของ Angular Directive ซึ่งสามารถแสดงผลได้เหมือนกับ Directive ตามปกติ

<ion-spinner></ion-spinner>

 B. วิธีกำหนดประเภท Icon

เราสามารถกำหนดประเภทของไอคอนที่จะแสดงได้ด้วย attribute icon ด้วย

// กำหนด spinner ให้เหมาะกับ Android
<ion-spinner icon="android"></ion-spinner>

 C. กำหนดสีให้กับ Icon

เรายังสามารถกำหนดสีให้กับ Ionic Spinner ได้ด้วยการใช้ระบบชื่อสีของ Ionic Framework ตามตัวอย่างด้านล่างนี้

// Ionic Spinner สีฟ้า
<ion-spinner class="spinner-positive"></ion-spinner>

// Ionic Spinner สีแดง
<ion-spinner class="spinner-assertive"></ion-spinner>

อ้างอิง – Ionic