Loaders Built with Preact and Styled Components ready for your next project because no one deserves to have to writes loadings all the time.
Credits and inspiration also belong heavily to the awesome work at SpinkKit
As I work on more projects over time more and more loaders will be added here.
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>
import { h } from 'preact'
import { Block } from 'styled-loaders'
const Page = ({ loading }) =>
<main>
{ loading ?
<Block color="red" size="60px" duration="5s" />
: 'Your Content'
}
</main>
-
- 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
-
- Props
- color - Background of the spinner default is #333
- size - Size of the spinner default is 40px
- Props
-
- 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
-
- Props
- color - Background of the spinner default is #333
- size - Size of the spinner default is 40px
- Props
-
- 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
-
- 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
-
- 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
-
- 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
-
- 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
MIT (2017 - Sara Vieira)