Loader

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

Dot loader

<Loader type="dots" loading />

Props

Prop	Type	Default	Description
height	number \| string		Height of the Loading container.
size	number \| string	40	The size of the component, applicable to only Circular progress.
type	'circle' \| 'linear' \|'dots'	'circle'	The variant to use.
label	string		The label content.
color	'primary' \| 'secondary'	'primary'	The color of the component. It supports those theme colors that make sense for this component.
percent	number		The Loading component accepts a value in the range 0 - 100.
loading	bool	false	If true, the Loader element will be visible on screen.
onClick	() => void		specific to Button loader, when type="button". Function that is called when the Button is clicked.
adminColor	bool	false	If true, semantic blue color is considered as primary color

Examples

Button loader

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