@rn-components-kit/spin v1.0.1
Spin
English | 中文
For displaying loading state of a page or a section. It supports 7 categories of spinner:
How to use
npm install @rn-components-kit/spin --save| Preview | Code |
|---|---|
| Demo1 Code | |
| Demo2 Code | |
| Demo3 Code | |
| Demo4 Code | |
| Demo5 Code | |
| Demo6 Code | |
| Demo7 Code |
Reference
Props for Ladder
style
Allows you to customize style
| Type | Required | Default |
|---|---|---|
| object | no | - |
scale
Zooming in/out scale of component
| Type | Required | Default |
|---|---|---|
| number | no | 1 |
duration
Duration of a looped animation
| Type | Required | Default |
|---|---|---|
| number | no | 5000 |
color
Color of elements inside component
| Type | Required | Default |
|---|---|---|
| string | no | '#40A9FF' |
Props for Rainbow
style
Allows you to customize style
| Type | Required | Default |
|---|---|---|
| object | no | - |
scale
Zooming in/out scale of component
| Type | Required | Default |
|---|---|---|
| number | no | 1 |
duration
Duration of a looped animation
| Type | Required | Default |
|---|---|---|
| number | no | 5000 |
colors
Five colors passed to rainbow
| Type | Required | Default |
|---|---|---|
| string[] | no | '#EA7671', '#81D2B4', '#A963B8', '#70ACF6', '#F4B860' |
Props for Wave
style
Allows you to customize style
| Type | Required | Default |
|---|---|---|
| object | no | - |
type
Type of wave
| Type | Required | Default |
|---|---|---|
enum('rect', 'dot') | no | 'rect' |
scale
Zooming in/out scale of component
| Type | Required | Default |
|---|---|---|
| number | no | 1 |
duration
Duration of a looped animation
| Type | Required | Default |
|---|---|---|
| number | no | 5000 |
color
Color of elements inside component
| Type | Required | Default |
|---|---|---|
| string | no | '#40A9FF' |
Props for RollingCubes
style
Allows you to customize style
| Type | Required | Default |
|---|---|---|
| object | no | - |
scale
Zooming in/out scale of component
| Type | Required | Default |
|---|---|---|
| number | no | 1 |
duration
Duration of a looped animation
| Type | Required | Default |
|---|---|---|
| number | no | 2200 |
color
Color of elements inside component
| Type | Required | Default |
|---|---|---|
| string | no | '#40A9FF' |
Props for ChasingCircles
style
Allows you to customize style
| Type | Required | Default |
|---|---|---|
| object | no | - |
scale
Zooming in/out scale of component
| Type | Required | Default |
|---|---|---|
| number | no | 1 |
duration
Duration of a looped animation
| Type | Required | Default |
|---|---|---|
| number | no | 1800 |
color
Color of elements inside component
| Type | Required | Default |
|---|---|---|
| string | no | '#40A9FF' |
Props for Pulse
style
Allows you to customize style
| Type | Required | Default |
|---|---|---|
| object | no | - |
scale
Zooming in/out scale of component
| Type | Required | Default |
|---|---|---|
| number | no | 1 |
duration
Duration of a looped animation
| Type | Required | Default |
|---|---|---|
| number | no | 2000 |
color
Color of elements inside component
| Type | Required | Default |
|---|---|---|
| string | no | '#40A9FF' |
Props for FlippingCard
style
Allows you to customize style
| Type | Required | Default |
|---|---|---|
| object | no | - |
scale
Zooming in/out scale of component
| Type | Required | Default |
|---|---|---|
| number | no | 1 |
duration
Duration of a looped animation
| Type | Required | Default |
|---|---|---|
| number | no | 1200 |
color
Color of elements inside component
| Type | Required | Default |
|---|---|---|
| string | no | '#40A9FF' |