Awesome
Preact Content Loader
2021-10-12. This project is archived and not updated anymore |
---|
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