https://github.com/babarbilal56/react-skeleton-animation-loader
A lightweight and customizable React skeleton loader component with smooth animation effects. Ideal for improving user experience during content loading states.
https://github.com/babarbilal56/react-skeleton-animation-loader
loader loading nextjs react shimmer-effect shimmer-loading skeleton-loading
Last synced: 4 months ago
JSON representation
A lightweight and customizable React skeleton loader component with smooth animation effects. Ideal for improving user experience during content loading states.
- Host: GitHub
- URL: https://github.com/babarbilal56/react-skeleton-animation-loader
- Owner: babarbilal56
- Created: 2025-02-20T08:40:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-20T09:36:03.000Z (over 1 year ago)
- Last Synced: 2025-10-02T12:14:37.343Z (9 months ago)
- Topics: loader, loading, nextjs, react, shimmer-effect, shimmer-loading, skeleton-loading
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-skeleton-animation-loader
- Size: 161 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Skeleton Animation Loader
A lightweight and customizable React skeleton loader component with smooth animation effects. Ideal for improving user experience during content loading states.
## Installation
Install the package using npm or yarn:
```sh
npm install react-skeleton-animation-loader
```
or
```sh
yarn add react-skeleton-animation-loader
```
## Usage
### Basic Example
```jsx
import React, { useState, useEffect } from 'react';
import SkeletonLoader from 'react-skeleton-animation-loader';
const ExampleComponent = () => {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => setLoading(false), 3000);
}, []);
return (
Content loaded!
);
};
export default ExampleComponent;
```
## Props
| Prop | Type | Default | Description |
| ---------------- | -------------------- | -------- | -------------------------------------------------------------- |
| `type` | `string` | `'text'` | Specifies the skeleton type (`'text'`, `'image'`, `'custom'`). |
| `isLoading` | `boolean` | `true` | Controls the loading state. If `true`, the skeleton appears. |
| `children` | `ReactNode` | `null` | Content to be displayed when `isLoading` is `false`. |
| `skeletonWidth` | `string` or `number` | `'100%'` | Custom width for the skeleton loader. |
| `skeletonHeight` | `string` or `number` | `'100%'` | Custom height for the skeleton loader. |
| `count` | `number` | `1` | Number of skeleton elements (useful for `type='custom'`). |
## Examples
### Image Skeleton Loader
```jsx
import React, { useState, useEffect } from 'react';
import SkeletonLoader from 'react-skeleton-animation-loader';
const ImageExample = () => {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => setLoading(false), 3000);
}, []);
return (
);
};
export default ImageExample;
```
### Custom Skeleton List
```jsx
import React, { useState, useEffect } from 'react';
import SkeletonLoader from 'react-skeleton-animation-loader';
const ListExample = () => {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => setLoading(false), 3000);
}, []);
return (
{[...Array(5)].map((_, index) => (
Item {index + 1}
))}
);
};
export default ListExample;
```
### Card Skeleton Loader
```jsx
import React, { useState, useEffect } from 'react';
import SkeletonLoader from 'react-skeleton-animation-loader';
const CardExample = () => {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => setLoading(false), 3000);
}, []);
return (
{!loading && Click Me}
);
};
export default CardExample;
```
## Styling
You can customize the animation using CSS. Example:
```css
.skeleton-loader {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
```
## License
MIT