Loader

主要用於等待載入資料時顯示正在運作的視覺效果。使用類別名稱為 .loader 並以此為子元件前綴詞。Loader 經常會與 Overlay 搭配使用。

每一個 Loader 樣式皆有預設尺寸與小號尺寸,類別名稱為 .sz:sm.sz:xs


預設樣式

預設樣式沿用 Lazy3 的 Loading 組件並作調整。

Loader
Loader
<div class="loader"> <span class="loader_txt">Loader</span> </div>

尺寸

小尺寸的 Loader 皆不搭配文字。


<div class="loader sz:sm"></div> <div class="loader sz:xs"></div>

配色

Loader 可能會在不同顏色背景上顯示,可能會與 Loader 預設色彩過於曖昧顯示不清,可使用 .clr:light 做選擇。下方以按鈕為例:

預設配色

.clr:light
<span class="loader clr:light"></span>

Flash

旋轉閃光效果可在 .loader 追加 :flash



<div class="loader :flash"></div> <div class="loader :flash sz:sm"></div> <div class="loader :flash sz:xs"></div>

<span class="loader :flash clr:light"></span>

Ripple

波紋漣漪效果可在 .loader 追加 :ripple



<div class="loader :ripple"></div> <div class="loader :ripple sz:sm"></div> <div class="loader :ripple sz:xs"></div>

<span class="loader :ripple clr:light"></span>

Spinner

光暈旋轉效果可在 .loader 追加 :spinner



<div class="loader :spinner"></div> <div class="loader :spinner sz:sm"></div> <div class="loader :spinner sz:xs"></div>

<span class="loader :spinner clr:light"></span>

Overlay

用於有浮動物件出現時,要與內容做出隔離而產生一個遮罩讓使用者專注於浮動物件的內容。使用類別為 .overlay。可將 Loader 置入於 Overlay 當中。Overlay 預設為顯示狀態,若要隱藏或消失於畫面上,可加上 .is:off

<div class="overlay"></div>

白色遮罩

Overlay 另外提供白色遮罩可以使用,只要在 .overlay 追加 clr:light 就可以了。

<div class="overlay clr:white"></div>