Get unlimited public & private packages + team-based management with npm Teams.Learn more »

react-circular-loading

2.0.1 • Public • Published

React Circular Loading

Loading component for React

NPM JavaScript Style Guide

Demo code

Install

npm i --save react-circular-loading

Usage

import Loading from 'react-circular-loading'
import 'react-circular-loading/style.css'
 
//..
<Loading />
//..

API

<Loading text={} size={} inverse={} wrapperClass={} />

text [String | Optional]

A status text for the spinner

size [String | Optional]

Custom sizes of the spinner. They are:

  • medium (default)
  • button (to use inside a button or anchor tag)
  • x-small
  • small
  • large

invese [String | Optional]

If set to inverse="inverse" change the spinner to it's invervese color. Default: #ffffff

wrapperClass [String | Optional]

Adds a class to the spinner's parent

Styling with Sass

$loading-bgcolor:    #007bff; //Spinner's main background color 
$loading-inverse-bgcolor:    #ffffff; //Spinner's inverse color 
 
$loading-text-color:    #000000; //Text main color 
$loading-inverse-text-color:    #ffffff;//Text inverse color 
$loading-font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue"Arialsans-serif"Apple Color Emoji""Segoe UI Emoji""Segoe UI Symbol"; //Text font family 
 
// Spinner sizes 
$loading-size-button: 20px; //Button 
$loading-font-size-button: 16px; //Button text 
$loading-size-xsmall: 30px; //X-small 
$loading-font-size-xsmall: 10px; //X-small text 
$loading-size-small: 40px; //Small 
$loading-font-size-small: 10px; //Small text 
$loading-size-medium: 50px; //Medium (Default) 
$loading-font-size-medium: 24px; //Medium text 
$loading-size-large: 90px; //Large 
$loading-font-size-large: 24px; //Large text 

License

MIT ©

Install

npm i react-circular-loading

DownloadsWeekly Downloads

6

Version

2.0.1

License

MIT

Unpacked Size

22.7 kB

Total Files

14

Last publish

Collaborators

  • avatar