A simple to use loading spinner for React.
Require needed code
var Spinner = ;
Run setup in React component
var Spinner = ;var Example = React;
Render the spinner with children
var Spinner = ;var Example = React;
Start and stop the spinner as needed
var Spinner = ;var Example = React;
Optional Props
// Set timeout before the spinner shows up, in s. // The default is 1s, to prevent the spinner from briefly flashing // every time something is loaded. spinWait: ReactPropTypesnumber // Set timeout before the message appears, in s. msgWait: ReactPropTypesnumber // Set what message appears. message: ReactPropTypesstring // The height of the spinner container. The actually spinner is 1/3rd // as tall to give some padding. height: ReactPropTypesnumber // The length of time between ticks, in ms. By default this is set to // 500, a lower number will tick more frequently (and allow more // granular spinWait/msgWait) values. A large number will mutate state // less frequently. tickLen: ReactPropTypesnumber // By default this is a div with the class 'vs-indicator', but this can // be overridden if you want a more complex indicator than can be made // with a single div. spinner: ReactPropTypesnode
Mixin Functions
addSpinners(names)
Add one or more spinners to the current component. A string name or an array of string names should be given.
e.g.
this this
getSpinner(name)
Fetch the current state of a spinner, typically only used as the loaded
prop.
e.g.
<Spinner loaded=this>
startSpinner(name)
Change the state of a spinner to false (i.e. not loaded). e.g.
this
stopSpinner(name)
Change the state of a spinner to true (i.e. done loading). e.g.
this