Skeleton

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

rc.stack(
    rc.skeleton(height="10px", speed=1.5),
    rc.skeleton(height="15px", speed=1.5),
    rc.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.

rc.stack(
    rc.skeleton_circle(size="30px"),
    rc.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).

rc.stack(
    rc.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.

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

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

Prop	Type \| Values	Default
`end_color`	`str`
`fade_duration`	`float`
`is_loaded`	`bool`
`speed`	`float`
`start_color`	`str`

Event Triggers

See the full list of default event triggers

rc.SkeletonCircle

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

Prop	Type \| Values	Default
`end_color`	`str`
`fade_duration`	`float`
`is_loaded`	`bool`
`speed`	`float`
`start_color`	`str`

Event Triggers

See the full list of default event triggers

rc.SkeletonText

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

Prop	Type \| Values	Default
`end_color`	`str`
`fade_duration`	`float`
`is_loaded`	`bool`
`speed`	`float`
`start_color`	`str`
`no_of_lines`	`int`

Event Triggers

See the full list of default event triggers