preact-content-loader-fixed
v1.0.0
Published
Content loader built with svg for Preact.
Downloads
7
Readme
Preact Content Loader
Component built based on SVG with a collection of loaders that simulates the content will be loaded, similar to Facebook cards.
This project is based on @danilowoz react implementation, however 100% ported to preact. No use of react-compat
You can use it in two ways:
First install the dependency:
npm i preact-content-loader --save-dev
Stylized: example
// import the component
import ContentLoader from 'preact-content-loader'
const MyLoader = () => {
return(
<ContentLoader type="facebook" />
)
}
Or in custom mode: example
// import the component
import ContentLoader, { Rect, Circle } from 'preact-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>
)
}
Options
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 | – | – |
Examples
Facebook Style
Instagram Style
Code Style
List Style
Custom Style
Credits
License
MIT