Loader
主要用於等待載入資料時顯示正在運作的視覺效果。使用類別名稱為 .loader 並以此為子元件前綴詞。Loader 經常會與 Overlay 搭配使用。
每一個 Loader 樣式皆有預設尺寸與小號尺寸，類別名稱為 .sz:sm 與 .sz:xs。
預設樣式
預設樣式沿用 Lazy3 的 Loading 組件並作調整。
<div class="loader">
<span class="loader_txt">Loader</span>
</div>
尺寸
小尺寸的 Loader 皆不搭配文字。
<div class="overlay clr:white">
<div class="loader sz:sm"></div>
</div>
<div class="overlay clr:white">
<div class="loader sz:xs"></div>
</div>
配色
Loader 可能會在不同顏色背景上顯示，可能會與 Loader 預設色彩過於曖昧顯示不清，可使用 .clr:light 做選擇。下方以按鈕為例：
預設配色
.clr:light
<div class="loader clr:light"></div>
Flash
旋轉閃光效果可在 .loader 追加 :flash。
<div class="loader :flash"></div>
<div class="loader :flash"></div>
Ripple
波紋漣漪效果可在 .loader 追加 :ripple。
<div class="loader :ripple"></div>
Spinner
光暈旋轉效果可在 .loader 追加 :spinner。
<div class="loader :spinner"></div>
Overlay
用於有浮動物件出現時，要與內容做出隔離而產生一個遮罩讓使用者專注於浮動物件的內容。使用類別為 .overlay。可將 Loader 置入於 Overlay 當中。Overlay 預設為顯示狀態，若要隱藏或消失於畫面上，可加上 .is:off。
<div class="overlay"></div>
白色遮罩
Overlay 另外提供白色遮罩可以使用，只要在 .overlay 追加 clr:light 就可以了。
<div class="overlay clr:white"></div>