4.0.0 • Published 3 months ago

react-loader-spinner v4.0.0

Weekly downloads
71,300
License
MIT
Repository
github
Last release
3 months ago

react-spinner-loader provides simple React SVG spinner component which can be implemented for async await operation before data loads to the view.

Installation

Using NPM:

$ npm install react-loader-spinner --save
Using yarn

$ yarn add react-loader-spinner
Import required css

import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";

Demo

View in page

Usage

import Loader from "react-loader-spinner";
export default class App extends React.Component {
  //other logic
  render() {
    return (
      <Loader
        type="Puff"
        color="#00BFFF"
        height={100}
        width={100}
        timeout={3000} //3 secs
      />
    );
  }
}

If webpack throws issue with css. (For older version of this package)

Change webpack config as: test: /\.scss$/ to test: /\.s?css$/ Newer version just import css file from node modules to app.js

Types of Spinner

react-loader-spinner component has the following types of spinners.

Spinner TypeImplementation
Audio<Loader type="Audio" color="#00BFFF" height={80} width={80} />
Ball-Triangle<Loader type="BallTriangle" color="#00BFFF" height={80} width={80} />
Bars<Loader type="Bars" color="#00BFFF" height={80} width={80} />
Circles<Loader type="Circles" color="#00BFFF" height={80} width={80}/>
Grid<Loader type="Grid" color="#00BFFF" height={80} width={80} />
Hearts<Loader type="Hearts" color="#00BFFF" height={80} width={80} />
Oval<Loader type="Oval" color="#00BFFF" height={80} width={80} />
Puff<Loader type="Puff" color="#00BFFF" height={80} width={80} />
Rings<Loader type="Rings" color="#00BFFF" height={80} width={80} />
TailSpin<Loader type="TailSpin" color="#00BFFF" height={80} width={80} />
ThreeDots<Loader type="ThreeDots" color="#00BFFF" height={80} width={80} />

There are more. View demo to see the full list.

PropTypes Available

react-loader-spinner component accepts the following props. Instructions on how to use them are below.

nametypesdefaultDetail
visibleString or booleanfalseShow/ Hide the loader as required.
typeString"Audio"Type of spinner you want to display. View the type in Types of Spinner section.
heightNumber80Height prop define the height of the svg spinner. Default height is 80px.
widthNumber80Width prop define the width of the spinner.
colorString"Blue"color prop is for adding color to the spinner
secondaryColorString"Grey"secondaryColor prop for now is available on Plane and MutatingDots loaders
timeoutNumber0Duration in milliseconds after which spinner is disabled
radiusNumbervalue variesSet radius if the loader has a circle element in it

Typescript

Typescript support is now also available. It has full propType intellisense support. Just install the component library as usual and use it in any (React) \<Typescript> project.Finally, you will get all sorts of propType intellisense & static typeChecking out of the box. Just like Javascript we also ❤ Typescript.

Here are the list of the task for which we want PR:

  • Optimize css implementation
  • Optimization for multiple color support.
  • Optimize css implementation
  • Add support for Typescript.
  • Optimization for multiple color support.

License

MIT

reactreportviewer@lintondev/ui-kitdefi-finder-calculatorreact-pathway-mapperpax-design-systemsatrate-test@sample-vst/application@evag/evagjs-reactreact-interactive-payment-form@stefancfuchs/firefly-chat-widget-2@geenee/sdk-example-trackingjuno-uimotor-uistocktrackerss-ui-components@datopian/datapackage-views-js@digitaliseringsbyran/foretagshjalpen-widgetviewpayvolt-terminalufc-componentsuse-contractkit@aliumswap/uikit@aliumswap/uikit-betadoric-componentscomponents-sergiocomponents-ejdatapackage-views-js@foris/avocado-ui@garney/busy-indicator@escs/react-escs-plugin@evag/ec-react@evag/evagjs@elliemae/ds-examples@elliemae/ds-devutils@geodavey/atlas@geodavey/gl-pyreneesgatsby-theme-utopixlotos4u-react-data-grid@heartfulnessinstitute/gatsby-plugin-hfn-profilemagmo-walletdialogs-embeddedshreya-appshreya-libdether-react-mapsegato-test@gravis.finance/uikitindicafix-components-uireact-bricksreact-c2c-uireact-cosmos-delegationreact-e-nno-componentpolitico-styleresources-coreusable-button-componentreusable-button-component-samplereusable-button-componentsscriptingchromeplugin_test@chakadev/react@celo-tools/use-contractkitreact-venturesreactratingroutingmat-periodic-tablemy-components-storybookmotive-renderergl-pyreneesminato-react-lib-demomongoose-admin-panel-frontendboilerplate-react-redux@parkassist/pa-ui-libraryblume-home@interdan/public-ui@irugard/currency-converter@infinite-web-tech/wtf@izberg/izberg-ui-beta@niogin/biapay@pharmasoft/core@visit-x/vxmessenger@visit-x/vxmessenger-mockup@vc3d/website@politico/interactive-style-sketch@bobaboard/ui-componentsbiapay@nlarew/docs-feedback-widgetarkit-editorpathway-mapper@blackswap/uikitorbit-reel-ui@alchemy-fr/phraseanet-react-components@alium-official/uikit@motor-js/core@motiveos/ui-kit2co-react@1papaya/gl-pyrenees@m-fe/react-model-viewer@materialsproject/mp-react-components
4.0.0

3 months ago

3.1.15-0

3 months ago

3.1.14

1 year ago

3.1.12

1 year ago

3.1.11

1 year ago

3.1.13

1 year ago

3.1.10

1 year ago

3.1.9

1 year ago

3.1.8

1 year ago

3.1.7

1 year ago

3.1.6

1 year ago

3.1.5

1 year ago

3.1.4

2 years ago

3.1.3

2 years ago

4.0.0-rc-1

2 years ago

3.2.4-rc-2

2 years ago

3.2.2-rc-2

2 years ago

3.0.2-rc2

2 years ago

3.2.2-rc-1

2 years ago

3.1.2

2 years ago

3.1.1

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

3.0.0-rc2

2 years ago

3.0.0-rc-2

2 years ago

3.0.0-rc-1

2 years ago

2.3.0

2 years ago

2.2.0

3 years ago

2.0.6

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.1.0

3 years ago

2.0.0

3 years ago

1.4.7

3 years ago

1.4.6

3 years ago

1.4.5

3 years ago

1.4.4

3 years ago

1.4.3

3 years ago

1.4.2

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.3.0

3 years ago

1.1.0

3 years ago

1.0.0

3 years ago