Component in React and SVG with a collection of loaders that simulate the content will be loaded, similar to Facebook cards.
If you are looking for React Native or Vue.js
First install the dependency:
npm i react-content-loader --save-devStylized: example
// import the component
import ContentLoader from 'react-content-loader'
const MyLoader = () => {
return(
<ContentLoader type="facebook" />
)
}Or in custom mode: example
// import the component
import ContentLoader, { Rect, Circle } from 'react-content-loader'
const MyLoader = () => {
return(
<ContentLoader height={140} speed={1} primaryColor={'#333'} secondaryColor={'#999'}>
<Circle x={195} y={30} radius={30} />
<Rect x={50} y={80} height={10} radius={5} width={300} />
<Rect x={75} y={100} height={10} radius={5} width={250} />
</ContentLoader>
)
}ContentLoader (wrap) options:
| Name | Type | Default | Description |
|---|---|---|---|
| style | Object | null |
Ex: { marginTop: '50px' } |
| type | String | facebook |
Options: facebook, instagram, list, code |
| speed | Number | 2 |
Animation speed |
| width | Number | 400 |
Width component |
| height | Number | 130 |
Height component |
| primaryColor | String | #f3f3f3 |
Background the SVG |
| secondaryColor | String | #ecebeb |
Animation color |
Custom element options:
| x | y | radius | width | height | |
|---|---|---|---|---|---|
| Rect | Number | Number | Number | Number | Number |
| Circle | Number | Number | Number | – | – |
- Code component;
- Custom elements;
- List component;
- React Native
Boilerplate for creating React Npm packages with ES2015
MIT