mirror of
https://github.com/zhigang1992/react-content-loader.git
synced 2026-04-24 04:15:55 +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
61 lines
1.8 KiB
Plaintext
61 lines
1.8 KiB
Plaintext
---
|
|
name: Welcome
|
|
route: /
|
|
---
|
|
|
|
<p align="center">
|
|
<img width="350" alt="react-content-loader" src="https://user-images.githubusercontent.com/4838076/34419335-5669c3f8-ebea-11e7-9668-c47b7846970b.png"/>
|
|
</p>
|
|
<p align="center">
|
|
<img width="400" alt="Example's react-content-loader" src="https://user-images.githubusercontent.com/4838076/34308760-ec55df82-e735-11e7-843b-2e311fa7b7d0.gif" />
|
|
</p>
|
|
|
|
SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
|
|
|
|
## Features
|
|
|
|
- :gear: **Customizable:** Feel free to change the colors, speed, sizes and even **RTL**;
|
|
- :ok_hand: **Plug and play:** with many presets to use, see the [examples](#examples);
|
|
- :pencil2: **DIY:** use the [create-content-loader](https://danilowoz.github.io/create-content-loader/) to create your own custom loaders easily;
|
|
- ⚛️ **Lightweight:** only **1.4kB** gzipped and **0 dependencies**;
|
|
|
|
## Getting Started
|
|
|
|
```sh
|
|
npm i react-content-loader --save
|
|
```
|
|
|
|
```sh
|
|
yarn add react-content-loader
|
|
```
|
|
|
|
CDN from [JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)
|
|
|
|
## Usage
|
|
|
|
There are two ways to use it:
|
|
|
|
**1. Presets, see the [examples](#examples):**
|
|
|
|
```jsx
|
|
import ContentLoader, { Facebook } from 'react-content-loader'
|
|
|
|
const MyLoader = () => <ContentLoader />
|
|
const MyFacebookLoader = () => <Facebook />
|
|
```
|
|
|
|
**2. Custom mode, see the [online tool](https://danilowoz.github.io/create-react-content-loader/)**
|
|
|
|
```jsx
|
|
const MyLoader = () => (
|
|
<ContentLoader>
|
|
{/* Only SVG shapes */}
|
|
<rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
|
|
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
|
|
<rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
|
|
</ContentLoader>
|
|
)
|
|
```
|
|
|
|
**Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9)
|