Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including preact-content-loader with all npm packages installed. Try it out:

var preactContentLoader = require("preact-content-loader")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

preact-content-loader v1.0.0

Content loader built with svg for Preact and Web Component compliant.

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:

NameTypeDefaultDescription
styleObjectnullEx: { marginTop: '50px' }
typeStringfacebookOptions: facebook, instagram, list, code
speedNumber2Animation speed
widthNumber400Width component
heightNumber130Height component
primaryColorString#f3f3f3Background the SVG
secondaryColorString#ecebebAnimation color

Custom element options:

xyradiuswidthheight
RectNumberNumberNumberNumberNumber
CircleNumberNumberNumber

Examples

Facebook Style

Facebook Style

Instagram Style

Instagram Style

Code Style

Code Style

List Style

List Style

Custom Style

Code Style

Credits

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free