https://github.com/SaraVieira/styled-loaders

Loaders Built with Preact and Styled Components
https://github.com/SaraVieira/styled-loaders

javascript preact styled-components

Last synced: about 2 months ago
JSON representation

Loaders Built with Preact and Styled Components

• Host: GitHub
• URL: https://github.com/SaraVieira/styled-loaders
• Owner: SaraVieira
• License: other
• Created: 2017-08-07T21:16:47.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-10-02T11:19:26.000Z (almost 4 years ago)
• Last Synced: 2024-05-11T16:32:37.110Z (4 months ago)
• Topics: javascript, preact, styled-components
• Language: JavaScript
• Homepage: https://styled-loaders.now.sh/
• Size: 530 KB
• Stars: 208
• Watchers: 7
• Forks: 16
• Open Issues: 2
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - styled-loaders

README

        
# Styled Loaders

[![Build Status](https://travis-ci.org/SaraVieira/styled-loaders.svg?branch=master)](https://travis-ci.org/SaraVieira/styled-loaders)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![npm version](https://badge.fury.io/js/styled-loaders.svg)](https://npmjs.com/styled-loaders)

## [Demo](https://styled-loaders.now.sh/)

## [NPM](https://npmjs.com/styled-loaders)

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](https://github.com/saisandeepvaddi/styled-loaders-react) by the awesome [Sai Sandeep Vaddi](https://github.com/saisandeepvaddi)

Credits and inspiration also belong heavily to the awesome work at  [SpinKit](http://tobiasahlin.com/spinkit/)

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

## Usage

```

npm i styled-loaders

or

yarn add styled-loaders

```

```js

import { h } from 'preact'

import { Cube } from 'styled-loaders'

const Page = ({ loading }) =>

    

        { loading ?

            

            : 'Your Content'

        }

    

```

### With Props

```js

import { h } from 'preact'

import { Block } from 'styled-loaders'

const Page = ({ loading }) =>

    

        { loading ?

            

            : 'Your Content'

        }

    

```

### Loaders

* Block

![Block](https://media.giphy.com/media/l378dJlRt7fvGHyfK/giphy.gif)

    * 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](https://media.giphy.com/media/l378y26cIAwgAVt4s/giphy.gif)

    * Props

        * color	- Background of the spinner default is #333

        * size - Size of the spinner default is 40px

* Cube

![Cube](https://media.giphy.com/media/3ov9jExQcWP6KTX1FS/giphy.gif)

    * 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](https://media.giphy.com/media/3ov9k9cASC7gCxpuLu/giphy.gif)

    * Props

        * color	- Background of the spinner default is #333

        * size - Size of the spinner default is 40px

* DotScale

![DotScale](https://media.giphy.com/media/l378c6525UOkzozVS/giphy.gif)

    * 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](https://media.giphy.com/media/l378ar9YphdtfvkYg/giphy.gif)

    * 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](https://media.giphy.com/media/l378kTgu2VkGC8kyk/giphy.gif)

    * 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](https://media.giphy.com/media/l378mCuj3oh3HwMjm/giphy.gif)

    * 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](https://media.giphy.com/media/3ov9jHpaSIMfW0p19m/giphy.gif)

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