components
Loader
v.1.0.0 | Saturn
StorybookProvide a visual cue that an action is processing, awaiting a course of change or a result.
import { Loader } from '@kubit-ui-web/react-components'
1
<Loader variant='PRIMARY_RED' width='48px' visible={true} />Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.
We have set these predefined styles for its quick use, access them through the variant prop:
Primary White
123
<Loader variant="PRIMARY_WHITE" width="48px" visible={true} /> <Loader variant="PRIMARY_RED" width="48px" visible={true} /> <Loader variant="PRIMARY_BLACK" width="48px" visible={true} />
Width
Set the width of the component according with your visual appearance.
12345
<div style={{display: 'flex', alignItems: 'center', gap: '20px'}}> <Loader variant='PRIMARY_RED' width='28px' visible={true} /> <Loader variant='PRIMARY_RED' width='48px' visible={true} /> <Loader variant='PRIMARY_RED' width='68px' visible={true} /> </div>