55 lines
1.2 KiB
Markdown
55 lines
1.2 KiB
Markdown
---
|
|
components:
|
|
- rx.chakra.Skeleton
|
|
- rx.chakra.SkeletonCircle
|
|
- rx.chakra.SkeletonText
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Skeleton
|
|
|
|
Skeleton is used to display the loading state of some components.
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```python demo
|
|
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).
|
|
|
|
```python demo
|
|
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.
|
|
|
|
```python demo
|
|
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),
|
|
)
|
|
```
|