Styled-loaders NPM

Styled Loaders

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 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 Props color - Background of the spinner default is #333 * size - Size of the spinner default is 40px
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 Props color - Background of the spinner default is #333 * size - Size of the spinner default is 40px
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 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 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 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 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