Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

spinner

v1.9.0arrow_drop_down
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
88
VISIBILITY
Public
PUBLISHED
2 weeks ago
SIZE
19 KB
Spinners should be shown when retrieving data or performing slow, help to reassure the user that the system is actively retrieving data.
1 contributor
Use spinner in your project ?
Copied
npm i @bit/nexxtway.react-rainbow.spinner
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
chevron_left
chevron_right
list loading using spinner - base - large
import React from 'react';
import { Spinner } from 'react-rainbow-components';

<div>
    <GlobalHeader src="images/user/user3.jpg" />
    <div className="rainbow-p-vertical_xx-large">
        <div className="rainbow-position_relative rainbow-m-vertical_xx-large rainbow-p-vertical_xx-large">
            <Spinner size="large" />
        </div>
    </div>
</div>
full screen loading using spinner - brand - medium
import React from 'react';
import { Spinner } from 'react-rainbow-components';

const containerStyles = {
    borderRadius: '0.875rem',
};

<div
    className="rainbow-background-color_white rainbow-align-content_center rainbow-position_relative rainbow-p-vertical_xx-large"
    style={containerStyles}
>
    <Spinner variant="brand" size="medium" />
    <h1 className="rainbow-color_brand rainbow-font-size-text_medium rainbow-p-top_xx-large rainbow-m-top_xx-large rainbow-m-bottom_large">
        Loadingb&
    </h1>
</div>
lazy loading using spinner - neutral - small
import React from 'react';
import { Spinner, Card, Button } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTasks } from '@fortawesome/free-solid-svg-icons';

const iconContainerStyles = {
    width: '2rem',
    height: '2rem',
};

const spinner = (
    <div className="rainbow-align-content_center">
        <div className="rainbow-position_relative">
            <Spinner size="small" variant="neutral" />
        </div>
        <h1 className="rainbow-font-size-text_medium rainbow-m-left_large rainbow-color_gray-4">
            Loadingb&
        </h1>
    </div>
);
<div className="rainbow-p-vertical_large rainbow-p-horizontal_large">
    <Card
        icon={
            <div
                className="rainbow-background-color_brand rainbow-border-radius_circle rainbow-align-content_center"
                style={iconContainerStyles}
            >
                <FontAwesomeIcon icon={faTasks} size="lg" className="rainbow-color_white" />
            </div>
        }
        title="Task"
        footer={spinner}
        actions={<Button variant="neutral" label="Add" />}
    >
        <div className="rainbow-p-vertical_xx-large" />
    </Card>
</div>
full screen loading using spinner - inverse - medium
import React from 'react';
import { Spinner } from 'react-rainbow-components';

const containerStyles = {
    backgroundColor: '#061c3f',
    borderRadius: '0.875rem',
};

const textStyles = {
    color: '#fff',
};

<div
    className="rainbow-background-color_white rainbow-align-content_center rainbow-position_relative rainbow-p-vertical_xx-large"
    style={containerStyles}
>
    <Spinner variant="inverse" size="medium" />
    <h1
        className="rainbow-font-size-text_medium rainbow-p-top_xx-large rainbow-m-top_xx-large rainbow-m-bottom_large"
        style={textStyles}
    >
        Loadingb&
    </h1>
</div>
Properties
NameTypeDefault valueDescription
variant
'base' | 'brand' | 'inverse' | 'neutral''base'

The variant changes the appearance of the spinner. Accepted variants are base, brand, and inverse. This value defaults to base.

size
'xx-small' | 'x-small' | 'small' | 'medium' | 'large''medium'

The size of the spinner. Accepted sizes are small, medium, and large. This value defaults to medium.

isVisible
booltrue

Show/Hide the spinner.

assistiveText
stringnull

A description for assistive sreen readers.

className
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectundefined

An object with custom style applied to the outer element.