Placeholder

An element used to reserve place for content that soon will appear in a layout.
Example
Theme
Default
Default
Light
Dark
Scale
Medium
Large
Medium
Small
<div class="ts-placeholder">
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>
Contents
Text

The text in the component is a line of text, and each line has a different width to make the simulation look more realistic.

<div class="ts-placeholder">
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>
Image

A Placeholder can also simulate the look of the image. By default the width of it matches the parent container width, which is usually recommended to specify the width manually.

<div class="ts-placeholder">
    <div class="image"></div>
</div>
States
Preparing

The flashing animation makes the user aware that the content is being prepared.

<div class="ts-placeholder is-preparing">
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>
Loading

Content has been loaded but is still being processed and has no estimated finish time.

<div class="ts-placeholder is-loading">
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>
Text
Header

The darker blocks can simulate a title text.

<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>
Widths

Manually specify the length and width of the text block.

<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>
Variations
Rounded

Smooth the corners of the block by rounding it.

<div class="ts-placeholder is-rounded">
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
</div>
Designed by Yami Odymel from Taiwan with the love of the contributors ❤️. The source code is licensed under MIT and the documents are CC 0 public domain. Tocas UI is a design language of Caris Events, which is owned by Sorae & Co.
Translators: Yami Odymel
An organization brand logo that owns Tocas UI