A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/bonitasoft/preact-content-loader below:

GitHub - bonitasoft/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

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>
  ) 
}

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 – –

MIT

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4