Content loader built with svg for Preact and Web Component compliant.
Last updated 3 years ago by lcustodio .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install preact-content-loader 
SYNC missed versions from official npm registry.

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 = () => {
    <ContentLoader type="facebook" />

Or in custom mode: example

// import the component
import ContentLoader, { Rect, Circle } from 'preact-content-loader'

const MyLoader = () => {
    <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 (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


Facebook Style

Facebook Style

Instagram Style

Instagram Style

Code Style

Code Style

List Style

List Style

Custom Style

Code Style




Current Tags

  • 1.0.0                                ...           latest (3 years ago)

1 Versions

  • 1.0.0                                ...           3 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (7)
Dependents (0)

Copyright 2014 - 2016 © |