Loaders Built with Preact and Styled Components
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib add duration to bar Oct 11, 2018
src add duration to bar Oct 11, 2018
.babelrc remove lerna Oct 7, 2017
.eslintrc.js remove lerna Oct 7, 2017
.gitignore update gitignore Oct 7, 2017
.stylelintrc fix stylelint Oct 7, 2017
.travis.yml Add more loaders Aug 8, 2017
LICENSE Add license file Oct 9, 2017
Readme.md remove codesponsor Jan 4, 2018
package.json 0.3.0 Oct 11, 2018
styleguide.config.js add duration to bar Oct 11, 2018
yarn.lock add duration to bar Oct 11, 2018

Readme.md

Styled Loaders

Build Status styled with prettier npm version

Demo

NPM

Loaders Built with Preact and Styled Components ready for your next project because no one deserves to have to writes loadings all the time.

If you are looking for a React version you can find one here by the awesome Sai Sandeep Vaddi

Credits and inspiration also belong heavily to the awesome work at SpinKit

As I work on more projects over time more and more loaders will be added here.

Usage

npm i styled-loaders
or
yarn add styled-loaders
import { h } from 'preact'
import { Cube } from 'styled-loaders'

const Page = ({ loading }) =>
    <main>
        { loading ?
            <Cube/>
            : 'Your Content'
        }
    </main>

With Props

import { h } from 'preact'
import { Block } from 'styled-loaders'

const Page = ({ loading }) =>
    <main>
        { loading ?
            <Block color="red" size="60px" duration="5s" />
            : 'Your Content'
        }
    </main>

Loaders

  • Block Block

    • Props
      • color - Background of the spinner default is #333
      • duration - Animation duration default is 1.2s
      • size - Size of the spinner default is 40px
  • Circular Circular

    • Props
      • color - Background of the spinner default is #333
      • size - Size of the spinner default is 40px
  • Cube Cube

    • Props
      • color - Background of the spinner default is #333
      • size - Size of the spinner default is 40px
      • cubeSize - Size of the each cube default is 15
      • duration - Animation duration default is 1.2s
  • CubeGrid CubeGrid

    • Props
      • color - Background of the spinner default is #333
      • size - Size of the spinner default is 40px
  • DotScale DotScale

    • Props
      • color - Background of the spinner default is #333
      • duration - Animation duration default is 1.2s
      • size - Size of the spinner default is 40px
      • dotSize - Size of the dots default is 18px
  • Pulsate Pulsate

    • Props
      • color - Background of the spinner default is #333
      • duration - Animation duration default is 1.2s
      • size - Size of the spinner default is 40px
  • RotateScale RotateScale

    • Props
      • color - Background of the spinner default is #333
      • duration - Animation duration default is 1.2s
      • size - Size of the spinner default is 40px
  • Scale Scale

    • Props
      • color - Background of the spinner default is #333
      • duration - Animation duration default is 1.2s
      • size - Size of the spinner default is 40px
  • Stretch Stretch

    • Props
      • color - Background of the spinner default is #333
      • duration - Animation duration default is 1.2s
      • size - Size of the spinner default is 40px
      • rectWidth - Width of each rectangle default is 6px

License

MIT (2017 - Sara Vieira)