React Shimmer Bar Chart Component - Light, Dark & Custom Modes
Enhance your web applications with the dynamic Shimmer Bar Chat Component, available in light and dark modes with customizable sizes.
Shimmer Bar Chart Light Mode
<ShimmerBarChart mode="light" chartType="linear" barWidth={"7%"} />
<ShimmerBarChart mode="light" chartType="random" barWidth={"7%"} />
Shimmer Bar Chart Dark Mode
<ShimmerBarChart mode="dark" chartType="linear" barWidth={"7%"} />
<ShimmerBarChart mode="dark" chartType="random" barWidth={"7%"} />
Shimmer Bar Chart Custom Mode
<ShimmerBarChart mode="custom" chartType="linear" barWidth={"7%"} from="#7c3aed" via="#8b5cf6" to="#7c3aed" lineColor="#8b5cf6" />
<ShimmerBarChart mode="custom" chartType="random" barWidth={"7%"} from="#7c3aed" via="#8b5cf6" to="#7c3aed" lineColor="#8b5cf6" />
Shimmer Bar Chart Loading Mode
<ShimmerBarChart mode="custom" chartType="random" barWidth={"7%"} from="#7c3aed" via="#8b5cf6" to="#7c3aed" lineColor="#8b5cf6" loading={loading}>
<Chart />
</ShimmerBarChart>
Properties
| Property | Type | Required | Default value | Description |
|---|---|---|---|---|
| barWidth | number | string | No | 7% | The bar width of the chart. |
| chartType | "linear" | "random" | Yes | - | The chart type. |
| loading | boolean | No | true | Whether the button is in a loading state. |
| children | ReactElement | No | - | Element to load after loading false |
| mode | "light" | "dark" | "custom" | Yes | - | The mode of the button (light, dark, or custom). |
| lineColor, from, via, to | string | Yes (for mode "custom") | - | The colors used in custom mode. |
Take it further
Take full advantage of React Shimmer Effect by experimenting with its extensive features and customization options
React Shimmer Button
A React component adding a shimmer effect to buttons for loading states.
React Shimmer Div
Enhance div elements with a shimmering loading animation using this React component.
React Shimmer Title
Apply a stylish shimmer effect to titles while content loads with this React component.
React Shimmer Text
A React component that provides a shimmering effect to text elements during loading.
React Shimmer Section Header
Give section headers a shimmering loading effect with this React component.
React Shimmer Category Items
A React component for adding a shimmer effect to category items while loading.
React Shimmer Content Block
Display shimmering placeholders for content blocks during data loading with this React component.
React Shimmer Table
Use this React component to add a shimmer effect to tables while they load.
Previous
Table