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' |