reflex_copy/docs/library/chakra/feedback/skeleton.md

---

components:

- rx.chakra.Skeleton
- rx.chakra.SkeletonCircle
- rx.chakra.SkeletonText

---

import reflex as rx

Skeleton

Skeleton is used to display the loading state of some components.

rx.chakra.stack(
    rx.chakra.skeleton(height="10px", speed=1.5),
    rx.chakra.skeleton(height="15px", speed=1.5),
    rx.chakra.skeleton(height="20px", speed=1.5),
    width="50%",
)

Along with the basic skeleton box there are also a skeleton circle and text for ease of use.

rx.chakra.stack(
    rx.chakra.skeleton_circle(size="30px"),
    rx.chakra.skeleton_text(no_of_lines=8),
    width="50%",
)

Another feature of skeleton is the ability to animate colors. We provide the args start_color and end_color to animate the color of the skeleton component(s).

rx.chakra.stack(
    rx.chakra.skeleton_text(
        no_of_lines=5, start_color="pink.500", end_color="orange.500"
    ),
    width="50%",
)

You can prevent the skeleton from loading by using the is_loaded prop.

rx.chakra.vstack(
    rx.chakra.skeleton(rx.chakra.text("Text is already loaded."), is_loaded=True),
    rx.chakra.skeleton(rx.chakra.text("Text is already loaded."), is_loaded=False),
)