範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-placeholder">
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
</div>內容
元件裡的 text 即是一行文字，每一行都會有不同的寬度令模擬看起來更真實。
<div class="ts-placeholder">
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
</div>預置區塊也可以模擬圖片的樣子，預設為流動符合父容器寬度，通常建議手動指定寬度。
<div class="ts-placeholder">
<div class="image"></div>
</div>狀態
呼吸閃爍的模樣讓使用者意識到內容正在準備中。
<div class="ts-placeholder is-preparing">
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
</div>內容已經獲取但仍在處理且沒有固定完成時間。
<div class="ts-placeholder is-loading">
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
</div>項目
較深色的區塊可以模擬一個標題文字。
<div class="ts-placeholder">
<div class="text is-header"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
</div>
<div class="ts-placeholder">
<div class="image is-header"></div>
<div class="text"></div>
<div class="text"></div>
</div>手動指定文字區塊的長短寬度。
<div class="ts-placeholder">
<div class="text is-extra-short"></div>
<div class="text is-very-short"></div>
<div class="text is-short"></div>
<div class="text"></div>
<div class="text is-long"></div>
<div class="text is-very-long"></div>
<div class="text is-extra-long"></div>
</div>外觀
