Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
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.

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

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.

PropTypeDescriptionValues
end_colorstr

The color at the animation end

fade_durationfloat

The fadeIn duration in seconds

is_loadedbool

If true, it'll render its children with a nice fade transition

speedfloat

The animation speed in seconds

start_colorstr

The color at the animation start

Event Triggers

See the full list of default event triggers

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

PropTypeDescriptionValues
end_colorstr

The color at the animation end

fade_durationfloat

The fadeIn duration in seconds

is_loadedbool

If true, it'll render its children with a nice fade transition

speedfloat

The animation speed in seconds

start_colorstr

The color at the animation start

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

PropTypeDescriptionValues
end_colorstr

The color at the animation end

fade_durationfloat

The fadeIn duration in seconds

is_loadedbool

If true, it'll render its children with a nice fade transition

speedfloat

The animation speed in seconds

start_colorstr

The color at the animation start

no_of_linesint

Number is lines of text.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting