Learn

Components

Recipes

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

/

Chakra

/

Feedback

/

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.

Text is already loaded.

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,
    ),
)

API Reference

Skeleton

Skeleton is used to display the loading state of some components. You can use it as a standalone component. Or to wrap another component to take the same height and width.