https://github.com/techwithty/loading-bar
A customizable loading bar component for React applications. Supports progress bars, Lottie animations, and Lucide icon sequences.
https://github.com/techwithty/loading-bar
component loading lottie lucide progress react ui ux
Last synced: 6 months ago
JSON representation
A customizable loading bar component for React applications. Supports progress bars, Lottie animations, and Lucide icon sequences.
- Host: GitHub
- URL: https://github.com/techwithty/loading-bar
- Owner: TechWithTy
- Created: 2025-09-04T04:37:58.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-09-04T04:54:42.000Z (7 months ago)
- Last Synced: 2025-09-04T06:31:06.808Z (7 months ago)
- Topics: component, loading, lottie, lucide, progress, react, ui, ux
- Language: TypeScript
- Homepage: https://www.cybershoptech.com
- Size: 2.93 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LoadingBar Component
A flexible loading indicator component that supports three types: progress bar, Lottie animation, and Lucide icons.
## Usage
### Import
```tsx
import LoadingBar from './LoadingBar';
```
### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `progress` | number | **required** | The progress percentage (0-100). |
| `mode` | 'inline' \| 'block' | 'block' | The layout mode. Inline mode displays the progress bar and percentage side by side. |
| `type` | 'progress' \| 'lottie' \| 'lucide' | 'progress' | The type of loading indicator. |
| `lottieSrc` | string | undefined | The path to the Lottie JSON file (required for Lottie type). |
| `lucideIcons` | React.ReactNode[] | [] | An array of Lucide icon components (required for Lucide type). |
| `className` | string | '' | Additional CSS classes for the wrapper. |
### Examples
#### Progress Bar (Default)
```tsx
```
#### Lottie Animation
```tsx
```
#### Lucide Icons
```tsx
import { Loader, RefreshCw } from 'lucide-react';
, ]}
/>
```
## Notes
- The component uses `next/dynamic` to dynamically import the Lottie player to avoid SSR issues.
- For the Lucide type, the icon displayed is determined by the current progress percentage and the number of icons provided.