A library for loading screen specifically for React js.

react-spinner-component

A library of React components created using npx create-react-app.

Installation

Run the following command: npm install react-spinner-component

Browser Support

| | | | --- | --- | --- | --- | --- | Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | Latest ✔ |

Installation

react-spinner-component is available via npm

Using npm:

$ npm install react-spinner-component --save
                    Or
npm i react-spinner-component --save OR npm install react-spinner-component --save

Usage

Import react-spinner-component in in the root module(App.js):

// Import library module
import {ReactLoadingView} from 'react-spinner-component';

Now use in your template

<ReactLoadingView
          loading={true}
          bgColor='#f1f1f1'
          spinnerColor='#E88634'
          textColor='#676767'
          textStyle='100'
          logoSrc='https://cdn-images-1.medium.com/max/512/1*6kK9j74vyOmXYm1gN6ARhQ.png'
          LoaderView='line-scale'
          customheight='100%'
          text='Let Fire Up the React' 
          customClassAdd = 'class'
      >
 //Your Entire DOM
 // Code
</ReactLoadingView>

React Spinner Component usage

• loading Make ite True or False
• bgColor Loading Screen Color
• spinnerColor Spinner Color
• textColor Text Color
• textStyle Text Style (In css we use font-weight same like that)
• logoSrc Your Logo Path
• LoaderView Loader View is the third party Dependence (React-Spinkit), you can pass the name of the Spinkit Spinners name. You can find in this URL: https://kyleamathews.github.io/react-spinkit/
• customheight Set Custom Height for the entire view
• text You can enter the custom text
• customClassAdd Add Specfic Class name to the Spinner

React Spinner Component

<ReactLoadingView
          loading={true}
          bgColor='#f1f1f1'
          spinnerColor='#E88634'
          textColor='#676767'
          textStyle='100'
          logoSrc='https://cdn-images-1.medium.com/max/512/1*6kK9j74vyOmXYm1gN6ARhQ.png'
          LoaderView='line-scale'
          customheight='100%'
          text='Let Fire Up the React' 
          customClassAdd = 'class'
      >
 //Your Entire DOM
 // Code
</ReactLoadingView>

Versioning

react-spinner-component will be maintained under the Semantic Versioning guidelines. Releases will be numbered with the following format:

<major>.<minor>.<patch>

For more information on SemVer, please visit http://semver.org.

Creator

Sukhjeet Singh

• @GitHub

Future Plan

• Make more customize
• Try to remove React-Spinkit dependence
• And suggestion are welcome by mails.
• Git repository for the issues and suggestion.

Credits

Inspired by React-Spinkit Help by [Nikunj Jariwala, Yuvraj Chauhan]

License

The MIT License (MIT)