mirror of
https://github.com/zhigang1992/react-content-loader.git
synced 2026-03-29 07:48:13 +08:00
b8e5cb9e8c
* feat(svg): add an interval prop Add an interval prop that controls the duration of the interval between two animations. For instance, an interval of `.25` and an animation speed of `2` imply that the animation will take 1.5s to complete, and wait 0.5s before starting again. * feat(svg): add a gradientRatio prop Add a gradientRatio prop that controls the width of the gradient relative to the viewbox's own width. For instance, a gradientRatio of `0.5` and a width of `200` imply that the resulting gradient will have a width of 100px. * docs(docz): add props section
59 lines
809 B
Plaintext
59 lines
809 B
Plaintext
---
|
|
name: Usage
|
|
route: /usage
|
|
---
|
|
|
|
import { Playground, PropsTable } from 'docz'
|
|
|
|
import ContentLoader, {
|
|
Facebook,
|
|
Instagram,
|
|
Code,
|
|
List,
|
|
BulletList,
|
|
} from '../src'
|
|
|
|
## Usage
|
|
|
|
## Different Type of Loaders
|
|
|
|
### Facebook Style Loader
|
|
|
|
<Playground>
|
|
<Facebook />
|
|
</Playground>
|
|
|
|
### Instagram Style Loader
|
|
|
|
<Playground>
|
|
<Instagram />
|
|
</Playground>
|
|
|
|
### Code Style Loader
|
|
|
|
<Playground>
|
|
<Code />
|
|
</Playground>
|
|
|
|
### List Style Loader
|
|
|
|
<Playground>
|
|
<List />
|
|
</Playground>
|
|
|
|
### BulletList Style Loader
|
|
|
|
<Playground>
|
|
<BulletList />
|
|
</Playground>
|
|
|
|
### Custom Loader
|
|
|
|
<Playground>
|
|
<ContentLoader>
|
|
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
|
|
<rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
|
|
<circle cx="35" cy="35" r="35" />
|
|
</ContentLoader>
|
|
</Playground>
|