dmitrymorozoff / react-spinners-kit Goto Github PK

View Code? Open in Web Editor NEW

255.0 4.0 40.0 3.23 MB

A collection of loading spinners with React.js

License: MIT License

JavaScript 100.00%

spinners react-components loaders react-spinners spinner progressbar react loading-spinners javascript

react-spinners-kit's Introduction

React Spinners Kit

A collection of loading spinners built with styled-components.

Live Demo

To check out live examples visit https://dmitrymorozoff.github.io/react-spinners-kit/

🚀 Installation

Install react-spinners-kit using npm.

`npm install --save react-spinners-kit`

or if you prefer yarn

`yarn add react-spinners-kit`

👨🏻‍💻 Usage

import React from "react";
import ReactDOM from "react-dom";
import { PushSpinner } from "react-spinners-kit";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: true,
        };
    }

    render() {
        const { loading } = this.state;
        return <PushSpinner size={30} color="#686769" loading={loading} />;
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

📃 PropTypes and Default Props

Each spinner accepts a loading prop as a boolean.
The loading prop defaults to true.
The loader will not render anything if loading is false.

Spinner	size: number	color: string	frontColor: string	backColor: string	sizeUnit: string
BallSpinner	`40`	`#00ff89`	-	-	`px`
BarsSpinner	`40`	`#00ff89`	-	-	`px`
CircleSpinner	`30`	`#fff`	-	-	`px`
CubeSpinner	`25`	-	`#00ff89`	`#686769`	`px`
DominoSpinner	`100`	`#686769`	-	-	`px`
FillSpinner	`20`	`#686769`	-	-	`px`
FireworkSpinner	`40`	`#fff`	-	-	`px`
FlagSpinner	`40`	`#fff`	-	-	`px`
GridSpinner	`40`	`#fff`	-	-	`px`
GuardSpinner	`40`	-	`#00ff89`	`#686769`	`px`
HeartSpinner	`40`	`#fff`	-	-	`px`
ImpulseSpinner	`40`	-	`#00ff89`	`#686769`	`px`
PulseSpinner	`40`	`#fff`	-	-	`px`
PushSpinner	`30`	`#686769`	-	-	`px`
SequenceSpinner	`40`	-	`#00ff89`	`#686769`	`px`
SphereSpinner	`30`	`#fff`	-	-	`px`
SpiralSpinner	`40`		`#00ff89`	`#686769`	`px`
StageSpinner	`40`	`#fff`	-	-	`px`
SwapSpinner	`40`	`#686769`	-	-	`px`
WaveSpinner	`30`	`#fff`	-	-	`px`
ClapSpinner	`30`	-	`#00ff89`	`#686769`	`px`
RotateSpinner	`45`	`#00ff89`	-	-	`px`
SwishSpinner	`40`	-	`#4b4c56`	`#fff`	`px`
GooSpinner	`55`	`#fff`	-	-	`px`
CombSpinner	`100`	`#fff`	-	-	`px`
PongSpinner	`60`	`#4b4c56`	-	-	`px`
RainbowSpinner	`50`	`#fff`	-	-	`px`
RingSpinner	`30`	`#00ff89`	-	-	`px`
HoopSpinner	`45`	`#4b4c56`	-	-	`px`
FlapperSpinner	`30`	`#00ff89`	-	-	`px`
MagicSpinner	`70`	`#fff`	-	-	`px`
JellyfishSpinner	`60`	`#4b4c56`	-	-	`px`
TraceSpinner	`70`	-	`#00ff89`	`#4b4c56`	`px`
ClassicSpinner	`30`	`#fff`	-	-	`px`
MetroSpinner	`40`	`#fff`	-	-	`px`
WhisperSpinner	`50`	`#fff`	`#4b4c56`	`#00ff89`	`px`

Development

You can also test the components locally by cloning this repo and doing the following steps:

Install dependencies from package.json:

`npm install`

Runs the app in the development mode.
Open http://localhost:1234 to view it in the browser.

`npm start`

Run linter

`npm run lint`

💻 Contributing

Pull requests and ⭐ stars are always welcome
For bugs and feature requests, please create an issue
Lint and test your code

License

MIT

react-spinners-kit's People

Contributors

Stargazers

Watchers

Forkers

feyeh trendingtechnology ranawebd amitgilad3 jonisar misaelcalvillo mikalv trichards57 10-seconds bstid anderjs dmandreev patbi andytsing ericobi medredha bjvda jonsnielsen d3sizn-code gabrielszcosta barbalex fariborz0015 ercadev mvyas-ubyon gmomartins lucas-zam folasayo-samuel mohanadoo markoff20k ramdaniali openabnr cactys italoacasas keitey sujalbandhara numra-gsoftconsulting dpwilhelmsen colus001

react-spinners-kit's Issues

Some of the props are lowercase

In the readme, the props are capitalized. I think all props are lowercase. Like for example the proptype color is not 'Color' but its 'color'. This confused for about 10 minutes. Would be better if we change the readme to lowercase. I know its obvious that it would be lowercase, but just putting it out here in case anyone might need it.

react native support?

it is possiible to enbale compatibiliy with react-native?

I got the following error

undefined is not an object (evaluating 'u.default.div.withConfig')

vulnerability #bug

Contains a critical vuln:

Critical: Arbitrary Code Execution  
Package: eslint-utils 
Dependency of: eslint [dev]   
More info: https://npmjs.com/advisories/1118

please remove and update

npm audit

npm audit fix --force

allow extending styles

consider exporting everything as a styled custom component to allow me to do something like


styled.div`
  ${ImpulseSpinner} {
    position: absolute;
    width: 100%;
    height: 100%;
  }
`

How to apply inline style

How to apply inline style? I'm using the react spinner like this:

<MetroSpinner size={80} color="#686769" loading={true} />

Support for styled components 5

Please add support for styled components 5.

React and React-Dom should be added to dev and peer dependencies

I am using this library as a dependency for a private npm package I am developing. I noticed I was having an issue developing my package locally because a dependency kept installing React when I did an npm install. This caused conflicts between my developer environment and local package. A symlink is usually used for both local projects to prevent this conflict. Upon further research I discovered 'react-spinners-kit' has react and react-dom in the dependencies which is causing it to automatically install. I believe best practice is to have it in peer dependencies and not dependencies.

Help Needed

module not found: Can't resolve 'styled-components' in '/Users/***/node_modules/react-spinners-kit/lib'

I am getting the following error while running in my reactjs web application

any help appreciated

Two versions of styled-components installed

Hey, awesome project and really love the spinners!
Since I'm using styled-components on my project I get an error becuase react-spinners-kit ships it's own version of styled-components. Resulting in having two different versions of styled components installed.
To resolve this the following packages need to be moved from dependencies to both peerDependencies and devDependencies:

prop-types,
react,
react-dom,
styled-components

Support tree shaking, es modules

Hi, loaders are nice, but your library is single js file.

Size of this library is really bad. If i include just one component, it will bundle 117.6 kB of JS.

https://bundlephobia.com/[email protected]

So please build this library as es-modules

Addition of text prop

Please add a text prop for each spinner, so that the users can add some texts along with the spinners. It can be helpful and can serve as an enhancement to the module.

parcel is not recognized as an internal or external command

When I tried to run project on my local system then I am getting this error and when I tried to install dependencies I am getting this

npm ERR! code 1
npm ERR! path C:\Users\hriti\OneDrive\Desktop\Open source\react-spinners-kit\node_modules\weak-napi
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c C:\Users\hriti\AppData\Local\Temp\install-4941a5d3.cmd
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Program Files\Python39\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack File "", line 1
npm ERR! gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:400:12)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1093:16)
npm ERR! gyp ERR! stack at Socket. (node:internal/child_process:451:11)
npm ERR! gyp ERR! stack at Socket.emit (node:events:513:28)
npm ERR! gyp ERR! stack at Pipe. (node:net:757:14)
npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\hriti\OneDrive\Desktop\Open source\react-spinners-kit\node_modules\node-gyp\bin\node
-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd C:\Users\hriti\OneDrive\Desktop\Open source\react-spinners-kit\node_modules\weak-napi
npm ERR! gyp ERR! node -v v16.17.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hriti\AppData\Local\npm-cache_logs\2022-12-29T05_36_39_005Z-debug-0.log

Support for styled components 4

Please add v4 support for styled components.

If it's already supported, please just change the peerDependencies entry to 2.x || 4.x to fix the npm warnings when installing react-spinners-kit. (Note that the current ^2.x does not include v4 in its range.)

MetroSpinner is not sticky in IE11

I don't know the best way to explain this but if you open the examples page on ie11 and scroll down to the metrospinner. You will see that its rotating in a circle around an axis, but if you open this same screen in Chrome it is fixed to that axis.