react-pure-loaders / react-pure-loaders Goto Github PK

React PureComponent loading animations

License: MIT License

JavaScript 0.76% TypeScript 99.17% Shell 0.07%

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

react-pure-loaders's Introduction

react-pure-loaders

React PureComponent loading animations

Demo

Demo Page

Installation

Install with yarn:

yarn add @emotion/core react-pure-loaders

Install with npm:

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

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 (
      <div>
        <BallBeat
          color={'#123abc'}
          loading={this.state.loading}
        />
      </div>
    )
  }
}

Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

loading: true
color: '#000000'

Loader	size:int	height:int	width:int	radius:int	margin:str
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

Contributors

Thanks goes to these wonderful people (emoji key):

_{James W. Lane III}
💻 📖

⚠️

_{Willane Paiva}
📖

_{Larissa Moura}
💻

⚠️

🔧🔌

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

License

react-pure-loaders's People

Contributors

Stargazers

Watchers

Forkers

fossabot wps13 neha larissagilliane trendingtechnology menzil shegz101

react-pure-loaders's Issues

Version 10 of node.js has been released

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

Replaced the old Node.js version in your .nvmrc with the new one

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

More information on this issue

Greenkeeper has checked the engines key in any package.json file, the .nvmrc file, and the .travis.yml file, if present.

engines was only updated if it defined a single version, not a range.
.nvmrc was updated to Node.js 10
.travis.yml was only changed if there was a root-level node_js that didn’t already include Node.js 10, such as node or lts/*. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.

For many simpler .travis.yml configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Test ticket from Code Climate

BallTrianglePath animation is broken.

Describe the bug
When using BallTrianglePath there is no animation.

The automated release is failing 🚨

🚨 The automated release from the `master` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

The automated release is failing 🚨

🚨 The automated release from the `master` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

BallGridBeat animation is broken.

Describe the bug
When using BallGridBeat there is no animation.

BallGridPulse animation is broken.

Describe the bug
When using BallGridPulse there is no animation.

Need to add Argos-CI to build process

URL: https://www.argos-ci.com

LineScaleRandom animation is broken.

Describe the bug
When using LineScaleRandom there is no animation.

Add components examples

Hello. I've noticed that doesn't exist practical examples of the components, for example a gif showing that component displays. I would like to add them to the documentation, if you don't mind.

Move @emotion/core to Peer Dependencies

BallPulseRise animation is broken.

Describe the bug
When using BallPulseRise there is no animation.

Homepage or Landing Page

Add a homepage or landing page for the base of the site.
Maybe using the README.md.

Domain for the project

Hello, James. I saw your comment about getting a domain for the project. I think that would be nice, cause it would be better for sharing info about the library.

Logo / Branding?

I have had logos made for some of my projects like Status Board.
Should I have someone design one for React Pure Loaders?
If I had Sticker Mule print stickers would you sport it on your laptop?
Or forget branding it, not worth the time?

Upgrading to Functional Component

Is your feature request related to a problem? Please describe.
Trying to integrate into a project using Functional Components

Describe the solution you'd like
I was hoping there could be an upgrade for this to be compatible with projects that are using Functional Component. From the sample on how to import this tool, I noticed that it was done using Class Components, so I was thinking if we could upgrade it to FC.

Describe alternatives you've considered
Honestly, none.

Additional context
Add any other context or screenshots about the feature request here.

Website home

I have tried to access the link given in the repository desciption and found the following:

Is the page supposed to look like this? Do you have any plans to change?

react-pure-loaders / react-pure-loaders Goto Github PK

react-pure-loaders's Introduction

react-pure-loaders

Demo

Installation

Usage

Example

Available Loaders, PropTypes, and Default Values

Contributors

License

react-pure-loaders's People

Contributors

Stargazers

Watchers

Forkers

react-pure-loaders's Issues

Version 10 of Node.js (code name Dubnium) has been released! 🎊

🚨 The automated release from the master branch failed. 🚨

The push permission to the Git repository is required.

🚨 The automated release from the master branch failed. 🚨

The push permission to the Git repository is required.

Recommend Projects

Recommend Topics

Recommend Org

🚨 The automated release from the `master` branch failed. 🚨

🚨 The automated release from the `master` branch failed. 🚨