https://github.com/huozhi/respinner
Pretty and customizable svg spinners for React.js
https://github.com/huozhi/respinner
loading loading-animations loading-spinner pure-javascript react spinner svg
Last synced: 8 months ago
JSON representation
Pretty and customizable svg spinners for React.js
- Host: GitHub
- URL: https://github.com/huozhi/respinner
- Owner: huozhi
- Created: 2016-10-01T18:56:21.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2024-10-18T19:32:18.000Z (over 1 year ago)
- Last Synced: 2025-04-12T14:16:05.412Z (10 months ago)
- Topics: loading, loading-animations, loading-spinner, pure-javascript, react, spinner, svg
- Language: JavaScript
- Homepage: https://respinner.vercel.app
- Size: 1.09 MB
- Stars: 142
- Watchers: 4
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Respinner
> react components for spinners or loaders. Each loader was combined css animation and render dom as svg.
easily controlled by react porps.
You could change the count of spinner's children by props `count`, also the `color` of themselves. All of them built with SVG, so you can easily scale them with `width` and `height`.
### Examples
See more details in `demo` directory or visit [website](https://respinner.vercel.app/)
### Usage
```sh
npm install --save respinner
```
Just import it when use with react. Issues go to [issues](https://github.com/huozhi/respinner/issues).
#### Basic
```tsx
import React from 'react'
import {
BeatLoading, BounceLoading, CircularLoading,
ClockLoading, RotateLoading, SpinLoading,
WaveLoading, DashLoading, CopperLoading
} from 'respinner'
function LoadingComponents() {
// use with customized props
// or just use with default props
}
```
#### Use with SVG `use`
```tsx
// pre-define a spinner
// reuse them
```
### API
Any SVG props could be used in these components. The following are the default props for these components:
#### 1. BeatLoading
- `gap`: `6`
- `size`: `8`
- `count`: `6`
- `duration`: `0.8`
#### 2. CircularLoading
- `size`: `40`
- `strokeWidth`: `4`
- `linecap`: `'round'`
#### 3. BounceLoading
- `gap`: `6`
- `count`: `4`
- `barWidth`: `4`
- `barHeight`: `16`
- `duration`: `0.8`
#### 4. RotateLoading
- `size`: `40`
- `opacity`: `0.2`
- `strokeWidth`: `4`
#### 5. SpinLoading
- `size`: `40`
- `count`: `8`
- `barWidth`: `4`
- `duration`: `1`
- `barHeight`: `10`
- `borderRadius`: `1`
#### 6. WaveLoading
- `size`: `40`
- `count`: `3`
- `duration`: `1.5`
- `strokeWidth`: `2`
### 7. ClockLoading
- `size`: `40`
- `duration`: `2`
- `strokeWidth`: `2`
### 8. DashLoading
- `size`: `40`
- `duration`: `1.8`
- `strokeWidth`: `4`
### 9. CopperLoading
- `size`: `40`
- `strokeWidth`: `4`
### Development
```sh
pnpm install
pnpm dev
# see demo in http://localhost:3000
```
### Build
```sh
pnpm run build # build lib
pnpm run build:docs # build docs
```
### License
MIT