styled-loaders
v0.3.0
Published
<!-- [![npm](https://img.shields.io/npm/dt/express.svg)](https://www.npmjs.com/package/styled-loaders) --> [![Build Status](https://travis-ci.org/SaraVieira/styled-loaders.svg?branch=master)](https://travis-ci.org/SaraVieira/styled-loaders) [![styled with
Downloads
27
Readme
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
- Props
Circular
- Props
- color - Background of the spinner default is #333
- size - Size of the spinner default is 40px
- Props
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
- Props
CubeGrid
- Props
- color - Background of the spinner default is #333
- size - Size of the spinner default is 40px
- Props
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
- Props
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
- Props
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
- Props
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
- Props
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
- Props
License
MIT (2017 - Sara Vieira)