Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-spinner-component with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("react-scripts/package.json"); // react-scripts is a peer dependency. require("react-spinkit/package.json"); // react-spinkit is a peer dependency. require("styled-components/package.json"); // styled-components is a peer dependency. var reactSpinnerComponent = require("react-spinner-component")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-spinner-component v0.2.2

React Spinner Component

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

ChromeFirefoxIESafariOpera
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

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)

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free