$ npm install --save ffe-spinner-react
ffe-spinner-react
depends onffe-core
andffe-spinner
being present and imported in your project. More specifically, the CSS classes related to spinner in ffe-spinner should be in your CSS Object Model when using this component.
@import "node_modules/ffe-spinner/less/spinner.less";
The default usage exposes a centered block-level spinner:
import Spinner from 'ffe-spinner-react';
<Spinner />
If you want to have a loading text you can supply that as well:
<Spinner text="Loading..." />
The text can either be a string, or a some other renderable node.
In case you prefer to use children you can also do that:
<Spinner>
Loading...
</Spinner>
The two examples above are functionally equivalent.
If you want a left-aligned spinner, you can disable the centering:
<Spinner center={ false } />
If you want a large spinner you can get that as well:
<Spinner large={ true }/>
Using all of the settings:
import Spinner from 'ffe-spinner-react';
<Spinner center={ false } large={ true } text="Loading..." />
In case you want to be a bit more explicit when you use a large spinner, you can also use the <LargeSpinner>
component:
import { LargeSpinner } from 'ffe-spinner-react';
<LargeSpinner center={ false } text="Loading..." />
It works exactly like <Spinner>
, but without the large
property.
In case you need a non-block level spinner you can use <InlineSpinner>
:
import { InlineSpinner } from 'ffe-spinner-react';
<div>
<InlineSpinner large={ true } /> Loading...
</div>
The only property available here is large
, which is defaulted to false
. As it's an inline component, any loading text or
suchlike has to be supplied outside of the component itself.