React Shimmer Div Component - Light, Dark & Custom Modes
Enhance your web applications with the dynamic Shimmer Div Component, available in light and dark modes with customizable sizes.
Shimmer Div Light Mode
<ShimmerDiv mode="light" height={100} width={100} />
<ShimmerDiv mode="light" height={100} width={100} rounded={50} />Shimmer Div Dark Mode
<ShimmerDiv mode="dark" height={100} width={100} />
<ShimmerDiv mode="dark" height={100} width={100} rounded={50} />Shimmer Div Custom Mode
<ShimmerDiv mode="custom" height={100} width={100} from="#7c3aed" via="#8b5cf6" to="#7c3aed"/>
<ShimmerDiv mode="custom" height={100} width={100} rounded={50} from="#7c3aed" via="#8b5cf6" to="#7c3aed" />Shimmer Div Loading Mode
<ShimmerDiv mode="light" height={100} width={100} loading={loading} >
<img src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?cs=srgb&dl=pexels-pixabay-33109.jpg&fm=jpg" style={{ height: "100px", width: "100px" }} />
</ShimmerDiv>
<ShimmerDiv mode="light" height={100} width={100} rounded={50} loading={loading} >
<img src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?cs=srgb&dl=pexels-pixabay-33109.jpg&fm=jpg" style={{ height: "100px", width: "100px", borderRadius: "50%"}} />
</ShimmerDiv>Properties
| Property | Type | Required | Default value | Description |
|---|---|---|---|---|
| height | number | Yes | - | The height of the div. |
| width | number | Yes | - | The width of the div. |
| border | number | No | 1px | The border width of the div. |
| rounded | number | No | 0.1em | The border radius of the div. |
| loading | boolean | No | true | Whether the div is in a loading state. |
| children | ReactElement | No | - | Element to load after loading false |
| mode | "light" | "dark" | "custom" | Yes | - | The mode of the div (light, dark, or custom). |
| 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 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.
React Shimmer Bar Chart
Add a loading shimmer effect to bar charts with this customizable React component.