Loader

Basic Usage


import { Loader } from '@krakentech/coral';
 
<Loader />

Properties

color


<Loader color="primary500" />
<Loader color="secondary500" />
<Loader color="tertiary500" />
<Loader color="base100" />
<Loader color="base500" />

size


<Loader size={100} />

type


<Loader type="linear" />

variant


<Loader variant="determinate" value={75} />
<Loader type="linear" variant="determinate" value={40} />
<Loader type="linear" variant="buffer" value={55} valueBuffer={80} />

Responsiveness


<Loader color={{ base: "primary500", md: "secondary500" }} />

Full API

Name	Type	Default
`type`	`"linear" \| "circular"` The type of loader, linear or circular	`circular`
`variant`	`"indeterminate" \| "determinate" \| "buffer"` The variant of the circular loader to use. Use indeterminate when there is no progress value Use determinate when there is a progress value The variant of the linear loader to use. Use indeterminate when there is no progress value Use determinate when there is a progress value Use buffer when there is a progress value with a buffer that is less than 100%	`indeterminate indeterminate`
`value`	`number` The percentage currently loaded, from 0-100	`0`
`ariaLabel`	`string` A description of the loader’s purpose for screen readers	`Loading`
`color`	`ResponsiveVariant<"primary500" \| "secondary500" \| "tertiary500" \| "base500" \| "base100">` The color of the loader	`primary500`