Reflex | Skeleton

✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨

Docs Blog Changelog

Search documentation...

Star

12k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

Skeleton

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

rx.stack(
    rx.skeleton(height="10px", speed=1.5),
    rx.skeleton(height="15px", speed=1.5),
    rx.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.stack(
    rx.skeleton_circle(size="30px"),
    rx.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.stack(
    rx.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.vstack(
    rx.skeleton(
        rx.text("Text is already loaded."), is_loaded=True
    ),
    rx.skeleton(
        rx.text("Text is already loaded."), is_loaded=False
    ),
)

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.

Props

Prop	Type	Description
`end_color`	str	The color at the animation end
`fade_duration`	float	The fadeIn duration in seconds
`is_loaded`	bool	If true, it'll render its children with a nice fade transition
`speed`	float	The animation speed in seconds
`start_color`	str	The color at the animation start

Base Event Triggers

SkeletonCircle

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

Props

Prop	Type	Description
`end_color`	str	The color at the animation end
`fade_duration`	float	The fadeIn duration in seconds
`is_loaded`	bool	If true, it'll render its children with a nice fade transition
`speed`	float	The animation speed in seconds
`start_color`	str	The color at the animation start

Base Event Triggers

SkeletonText

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

Props

Prop	Type	Description
`end_color`	str	The color at the animation end
`fade_duration`	float	The fadeIn duration in seconds
`is_loaded`	bool	If true, it'll render its children with a nice fade transition
`speed`	float	The animation speed in seconds
`start_color`	str	The color at the animation start
`no_of_lines`	int	Number is lines of text.

Base Event Triggers

← Progress Spinner →

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

Skeleton

Skeleton

Props

Base Event Triggers

SkeletonCircle

Props

Base Event Triggers

SkeletonText

Props

Base Event Triggers

[ Learn ]