Loader

The content aware loaders indicate that something is loading on a page and hints what might appear there. The regular loaders is a simple spinny. To use, import from @marvelapp/ui:

import { Loader, ContentLoader } from '@marvelapp/ui';

Content loader kind

The <ContentLoader /> component has a few kinds available that can be used depending on the context of the action being performed.

<ContentLoader width={100} height={50} kind="light" />
<ContentLoader width={100} height={50} kind="medium" />
<ContentLoader width={100} height={50} kind="dark" />

Loader color

The color of the <Loader /> component can be customized by the color prop.

<Loader color="silver" />
<Loader color="marvel" />
<Loader color="red" />
<Loader color="purple" />

Loader size

The size of the <Loader /> component can be customized by both the size and borderWidth props.

<Loader size={48} borderWidth={6} />
<Loader size={32} borderWidth={5} />
<Loader size={24} borderWidth={4} />
<Loader size={16} borderWidth={3} />

Props