Skip to content
This repository has been archived by the owner on Jan 25, 2022. It is now read-only.

bonitasoft/preact-content-loader

Repository files navigation

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

  • If you are looking for a react version, see here.
  • if you are looking for React Native, see here.

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

Facebook Style

Instagram Style

Instagram Style

Code Style

Code Style

List Style

List Style

Custom Style

Code Style

Credits

License

MIT

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •