Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/react-pure-loaders/react-pure-loaders

React PureComponent loading animations
https://github.com/react-pure-loaders/react-pure-loaders

component-library css-in-js emotion loading-animations loading-indicator loading-spinner purecomponent react spinner-components spinners

Last synced: about 4 hours ago
JSON representation

React PureComponent loading animations

Host: GitHub
URL: https://github.com/react-pure-loaders/react-pure-loaders
Owner: react-pure-loaders
License: mit
Created: 2017-11-10T11:19:28.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2023-07-03T11:54:44.000Z (over 1 year ago)
Last Synced: 2024-10-23T00:30:23.374Z (about 2 months ago)
Topics: component-library, css-in-js, emotion, loading-animations, loading-indicator, loading-spinner, purecomponent, react, spinner-components, spinners
Language: TypeScript
Homepage: https://reactpureloaders.com
Size: 4.72 MB
Stars: 25
Watchers: 3
Forks: 7
Open Issues: 12
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

stars - react-pure-loaders - pure-loaders | 25 | (TypeScript)
stars - react-pure-loaders - pure-loaders | 25 | (TypeScript)

README

        # react-pure-loaders

[![Build Status][build-badge]][build]

[![Code Coverage][coverage-badge]][coverage]

[![dependencies Status][david-dm-badge]][david-dm]

[![devDependencies Status][david-dm-dev-badge]][david-dm-dev]

[![version][version-badge]][package]

[![downloads][downloads-badge]][npm-stat]

[![MIT License][license-badge]][LICENSE]

[![Greenkeeper badge][greenkeeper-badge]][greenkeeper]

[![FOSSA Status][fossa-badge]][fossa]

[![Known Vulnerabilities][snyk-badge]][snyk]

[![PRs Welcome][prs-badge]][prs]

[![All Contributors][contributors-badge]][contributors]

[![Donate][donate-badge]][donate]

[![Code of Conduct][coc-badge]][coc]

[![Roadmap][roadmap-badge]][roadmap]

[![Examples][examples-badge]][examples]

[![semantic-release][semantic-release-badge]][semantic-release]

[![Commitizen friendly][commitizen-badge]][commitizen]

[![Watch on GitHub][github-watch-badge]][github-watch]

[![Star on GitHub][github-star-badge]][github-star]

[![Tweet][twitter-badge]][twitter]

React PureComponent loading animations

## Demo

[Demo Page](https://reactpureloaders.com/)

## Installation

Install with `yarn`:

```bash

yarn add @emotion/core react-pure-loaders

```

Install with `npm`:

```bash

npm install @emotion/core react-pure-loaders --save

```

## Usage

Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders.

Each loader accepts a `loading` prop as a boolean. The loader will not render anything if `loading` is `false`.

### Example

```js

import React from 'react';

import { BallBeat } from 'react-pure-loaders';

class AwesomeComponent extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      loading: true

    }

  }

  render() {

    return (

      


        

      

    )

  }

}

```

## Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

```js

loading: true

color: '#000000'

```

Loader 
----------------- 
BallBeat 
BallClipRotate 
BallClipRotateMultiple  | 
BallClipRotatePulse     | 
BallGridBeat 
BallGridPulse 
BallPulse 
BallPulseRise 
BallPulseRound 
BallPulseSync 
BallRotate 
BallScale 
BallScaleMultiple 
BallScaleRandom 
BallScaleRipple 
BallScaleRippleMultiple | 
BallSpinFadeLoader 
BallSpinLoader 
BallTrianglePath 
BallZigZag 
BallZigZagDeflect 
LineScale 
LineScaleParty 
LineScalePulseOut 
LineScalePulseOutRapid  | 
LineScaleRandom 
LineSpinFadeLoader 
CubeTransition 
Pacman 
SemiCircleSpin 
SquareSpin 
TriangleSkewSpin

| size:int | height:int | width:int | radius:int | margin:str ------:|:--------:|:----------:|:---------:|:----------:|:---------: |          |            |           |            | |          |            |           |            | |            |           |            | |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            | |          |            |           |            |

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

  

    
_{James W. Lane III}
💻 📖 ⚠️

    
_{Willane Paiva}
📖

    
_{Larissa Moura}
💻 ⚠️🔧🔌

  

This project follows the [all-contributors][all-contributors] specification. Contributions of any kind welcome!

## License

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fjameswlane%2Freact-pure-loaders.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fjameswlane%2Freact-pure-loaders?ref=badge_large)

[build-badge]: https://travis-ci.org/jameswlane/react-pure-loaders.svg?branch=master

[build]: https://travis-ci.org/jameswlane/react-pure-loaders

[coverage-badge]: https://coveralls.io/repos/github/jameswlane/react-pure-loaders/badge.svg?branch=master

[coverage]: https://coveralls.io/github/jameswlane/react-pure-loaders?branch=master

[david-dm-badge]: https://david-dm.org/jameswlane/react-pure-loaders/status.svg

[david-dm]: https://david-dm.org/jameswlane/react-pure-loaders

[david-dm-dev-badge]: https://david-dm.org/jameswlane/react-pure-loaders/dev-status.svg

[david-dm-dev]: https://david-dm.org/jameswlane/react-pure-loaders?type=dev

[version-badge]: https://img.shields.io/npm/v/react-pure-loaders.svg

[package]: http://npm.im/react-pure-loaders

[downloads-badge]: https://img.shields.io/npm/dm/react-pure-loaders.svg

[npm-stat]: http://npm-stat.com/charts.html?package=react-pure-loaders&from=2016-04-01

[license-badge]: https://img.shields.io/npm/l/react-pure-loaders.svg

[license]: https://github.com/jameswlane/react-pure-loaders/blob/master/other/LICENSE

[greenkeeper-badge]: https://badges.greenkeeper.io/jameswlane/react-pure-loaders.svg

[greenkeeper]: https://greenkeeper.io/

[fossa-badge]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fjameswlane%2Freact-pure-loaders.svg?type=shield

[fossa]: https://app.fossa.io/projects/git%2Bgithub.com%2Fjameswlane%2Freact-pure-loaders?ref=badge_shield

[snyk-badge]: https://snyk.io/test/github/jameswlane/react-pure-loaders/badge.svg

[snyk]: https://snyk.io/test/github/jameswlane/react-pure-loaders

[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg

[prs]: http://makeapullrequest.com

[contributors-badge]: https://img.shields.io/badge/all_contributors-3-orange.svg

[contributors]: #contributors

[donate-badge]: https://img.shields.io/badge/$-support-green.svg

[donate]: PayPal.Me/jameswlane/10

[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg

[coc]: https://github.com/jameswlane/react-pure-loaders/blob/master/other/CODE_OF_CONDUCT.md

[roadmap-badge]: https://img.shields.io/badge/%F0%9F%93%94-roadmap-CD9523.svg

[roadmap]: https://github.com/jameswlane/react-pure-loaders/blob/master/other/ROADMAP.md

[examples-badge]: https://img.shields.io/badge/%F0%9F%92%A1-examples-8C8E93.svg

[examples]: https://github.com/jameswlane/react-pure-loaders/blob/master/other/EXAMPLES.md

[semantic-release-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg

[semantic-release]: https://github.com/semantic-release/semantic-release

[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg

[commitizen]: http://commitizen.github.io/cz-cli/

[github-watch-badge]: https://img.shields.io/github/watchers/jameswlane/react-pure-loaders.svg?style=social

[github-watch]: https://github.com/jameswlane/react-pure-loaders/watchers

[github-star-badge]: https://img.shields.io/github/stars/jameswlane/react-pure-loaders.svg?style=social

[github-star]: https://github.com/jameswlane/react-pure-loaders/stargazers

[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20react-pure-loaders!%20https://github.com/jameswlane/react-pure-loaders%20%F0%9F%91%8D

[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/jameswlane/react-pure-loaders.svg?style=social

[all-contributors]: https://github.com/kentcdodds/all-contributors

[npm]: https://www.npmjs.com/

[node]: https://nodejs.org