Skeleton
FeedbackA placeholder for loading state — rectangular or circular shapes.
Preview
Variants
Rectangle
Circle
Usage
skeleton.rs
use floe_ui::components::skeleton;
"text-zinc-500">// Rectangular placeholder
let rect = skeleton::rect(200, 16, &tokens);
"text-zinc-500">// Circular placeholder (e.g. avatar loading)
let circle = skeleton::circle(48, &tokens);API Reference
Props / Parameters
| Name | Type | Description |
|---|---|---|
| width | impl Into<Length> | Width of the skeleton |
| height | impl Into<Length> | Height of the skeleton (rect only) |
| diameter | impl Into<Length> | Diameter of the circle (circle only) |
| tokens | &DesignTokens | Design tokens for theming |
Style Functions
default_style(tokens)
circle_style(tokens)
Style functions return closures compatible with Iced's .style() method.
Builder Functions
rect(width, height, tokens)
circle(diameter, tokens)
Builder functions return pre-configured Iced widgets ready for use.
Source: floe-ui/src/components/skeleton.rs