2.0.1 • Published 6 years ago
react-circular-loading v2.0.1
React Circular Loading
Loading component for React
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", Arial, sans-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
2.0.1
6 years ago
2.0.0
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4-alpha
6 years ago
1.0.2-alpha
6 years ago
1.0.1-alpha
6 years ago
1.0.0-alpha
6 years ago