Use the Loader component to let the user know that a process is happening or something is loading. Loader renders a responsive box-model layout component.

Import component

import { Loader } from 'rimble-ui';

Examples

Default

<Loader />
<Loader />
Copy code

Loader with background

<Loader bg="primary" color="white" />
<Loader bg="primary" color="white" />
Copy code

Custom size

<Loader size="40px" />
<Loader size="40px" />
Copy code

Custom colour

<Loader color="red" size="80px" />
<Loader color="red" size="80px" />
Copy code

Custom size with color and background

<Loader bg="primary" color="white" size="80px" />
<Loader bg="primary" color="white" size="80px" />
Copy code

Custom background

<Loader bg="grey" color="white" />
<Loader bg="grey" color="white" />
Copy code

Black loader

<Loader color="black" />
<Loader color="black" />
Copy code

Props

'transparent'

'primary'

'1rem'

Styled System Props

Loader uses COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS groups of Styled System props.