Shimmer-DEMO

---

Avatar with item

<fv-Shimmer style="height: auto;">
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div v-for="(item, index) in 5" :key="index" style="margin-top: 5px; display: flex; align-items: center;">
            <div class="sample" style="width: 35px; height: 35px; border-radius: 50%;"></div>
            <div class="sample" style="width: 80%; margin-left: 15px;"></div>
        </div>
    </div>
</fv-Shimmer>

List items

<fv-Shimmer style="height: auto;">
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div v-for="(item, index) in 3" :key="index" style="margin-top: 5px; display: flex; align-items: center;">
            <div class="sample" style="width: 80%; height: 15px;" :style="{width: `${100 - index * 10}%`}"></div>
        </div>
    </div>
</fv-Shimmer>

List items with two column

<fv-Shimmer style="height: auto;">
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div v-for="(item, index) in 3" :key="index" style="margin-top: 5px; display: flex; align-items: center;">
            <div class="sample" style="width: 80%; height: 15px;" :style="{width: `${50 - index * 10}%`}"></div>
            <div class="sample" style="width: 80%; height: 15px; margin-left: 15px;" :style="{width: `${50 - index * 10}%`}"></div>
        </div>
    </div>
</fv-Shimmer>

Shimmer-Dark Theme

---

Avatar with item

<fv-Shimmer theme="dark" style="height: auto;">
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div v-for="(item, index) in 5" :key="index" style="margin-top: 5px; display: flex; align-items: center;">
            <div class="sample" style="width: 35px; height: 35px; border-radius: 50%;"></div>
            <div class="sample" style="width: 80%; margin-left: 15px;"></div>
        </div>
    </div>
</fv-Shimmer>

List items

<fv-Shimmer theme="dark" style="height: auto;">
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div v-for="(item, index) in 3" :key="index" style="margin-top: 5px; display: flex; align-items: center;">
            <div class="sample" style="width: 80%; height: 15px;" :style="{width: `${100 - index * 10}%`}"></div>
        </div>
    </div>
</fv-Shimmer>

List items with two column

<fv-Shimmer theme="dark" style="height: auto;">
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div v-for="(item, index) in 3" :key="index" style="margin-top: 5px; display: flex; align-items: center;">
            <div class="sample" style="width: 80%; height: 15px;" :style="{width: `${50 - index * 10}%`}"></div>
            <div class="sample" style="width: 80%; height: 15px; margin-left: 15px;" :style="{width: `${50 - index * 10}%`}"></div>
        </div>
    </div>
</fv-Shimmer>

Properties

---

Property	Type	Required	Default	Description
theme	string	No	'global'	Theme style. Supports global, light, dark, system, and custom.
disabled	boolean	No	false	See the Shimmer disabled option.
lang	string	No	"global"	See the Shimmer lang option.

Slots

---

1. Default

<div class="sample"></div>

<fv-shimmer>
    <div class="sample"></div>
</fv-shimmer>