shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ChartLineLoadingPlaceholder } from "@/components/charts/chart-line-loading-placeholder";<ChartLineLoadingPlaceholder />API Reference
LineChartLoading
style?CSSProperties
Inline styles for the placeholder container. With aspectRatio: "unset" and a height the placeholder fills that height at any width, for example to hold a LiveLineChart's style.height while its stream connects.
margin?Partial<ChartMargin>
Space around the plot area in pixels. Missing sides use the default.
- Type
Partial<ChartMargin>- Default
{ top: 40, right: 40, bottom: 40, left: 40 }
stroke?string
Color of the traveling loading segment.
- Default
"var(--bkm-foreground)"
strokeOpacity?number
Opacity of the traveling loading segment.
- Default
0.5
gridStroke?string
Color of the grid lines while loading. Use color-mix or an oklch alpha to set the opacity.
- Default
"color-mix(in oklch, var(--chart-grid) 50%, transparent)"
gridShimmerStroke?string
Color of the shimmer band that travels across the grid. Use color-mix or an oklch alpha to set the opacity.
- Default
"color-mix(in oklch, var(--bkm-foreground) 68%, transparent)"
gridShimmer?boolean
Animate a shimmer band across the grid lines. Always off when loadingStyle is "sweep".
- Default
true
gridShimmerLength?number
Accepted for bklit-ui compatibility. It has no effect: the shimmer band has a fixed width.
gridShimmerSpeed?number
Shimmer speed multiplier; higher is faster.
- Default
1
gridShimmerSync?boolean
Accepted for bklit-ui compatibility. It has no effect: the shimmer always loops on the same period as the line pulse.
loadingStyle?LoadingStyle
Loading animation: "pulse" sends a bright segment along the line, "sweep" sweeps a soft diagonal shimmer across it.
- Default
"pulse"
label?string
Text shown centered over the placeholder, with a shimmer. An empty string hides it.
- Default
"Loading"
aspectRatio?string
CSS aspect ratio of the placeholder, as "width / height".
- Default
"2 / 1"
className?string
Extra CSS class name for the placeholder container.
- Default
""