Display a progress content before the data gets loaded to reduce load-time frustration.

Dot loader

<Loader type="dots" loading />


heightnumber | stringHeight of the Loading container.
sizenumber | string40The size of the component, applicable to only Circular progress.
type'circle' | 'linear' |'dots''circle'The variant to use.
labelstringThe label content.
color'primary' | 'secondary''primary'The color of the component. It supports those theme colors that make sense for this component.
percentnumberThe Loading component accepts a value in the range 0 - 100.
loadingboolfalseIf true, the Loader element will be visible on screen.
onClick() => voidspecific to Button loader, when type="button". Function that is called when the Button is clicked.
adminColorboolfalseIf true, semantic blue color is considered as primary color


Button loader

() => {
const [loading, setLoading] = React.useState(false);
const onClick = () => {
return (
<Button loading={loading} onClick={onClick}>Click Me</Button>