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 componentimport ContentLoader from 'preact-content-loader' const MyLoader = return <ContentLoader ="facebook" />
Or in custom mode: example
// import the componentimport ContentLoader Rect Circle from 'preact-content-loader' const MyLoader = return <ContentLoader = = = => <Circle = = = /> <Rect = = = = = /> <Rect = = = = = /> </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