npm

Need private packages and team management tools?Check out npm Orgs. »

preact-content-loader

1.0.0 • Public • Published

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

  • 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

install

npm i preact-content-loader

Downloadsweekly downloads

72

version

1.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability