Arterial Circular Progress
Another React Material Circular Progress
Installation
npm install @arterial/circular-progress
Usage
Styles
Sass
@use "@material/circular-progress/index.scss" as circular-progress;
@include circular-progress.core-styles;
CSS
import '@material/circular-progress/dist/mdc.circular-progress.css';
JSX
import { CircularProgress } from '@arterial/circular-progress';
Determinate Progress
Determinate circular indicators fill the invisible, circular track with color, as the indicator moves from 0 to 360 degrees.
<CircularProgress progress={0.25} />
<CircularProgress progress={0.5} />
<CircularProgress progress={0.75} />
<CircularProgress progress={1} />
Indeterminate Progress
Indeterminate circular indicators grow and shrink in size while moving along the invisible track.
<CircularProgress />
<CircularProgress medium />
<CircularProgress small />
Other Variants
Four Colors
<CircularProgress fourColors />
<CircularProgress fourColors medium />
<CircularProgress fourColors small />
Custom Four Colors
<CircularProgress fourColors />
<CircularProgress fourColors medium />
<CircularProgress fourColors small />
Buttons
import { Button } from '@arterial/button'
<Button
icon={<CircularProgress small />}
label="Text"
/>
<Button
icon={<CircularProgress small />}
outlined
label="Outlined"
/>
<Button
icon={<CircularProgress small />}
unelevated
label="Unelevated"
/>
<Button
icon={<CircularProgress small />}
raised
label="Raised"
/>
Chips
import { Chip, ChipSet } from '@arterial/chip';
<ChipSet choice>
<Chip icon={<CircularProgress small />} text="Alfa" />
<Chip icon={<CircularProgress small />} selected text="Bravo" />
</ChipSet>;
Props
CircularProgress
Name | Type | Description |
---|
children | node | Elements to be displayed within root element. |
className | string | Classes to be applied to the root element. |
closed | boolean | Hides the circular progress indicator. |
fourColors | boolean | Enables a four colors variant. |
label | boolean | Sets the aria label of the element. Defaults to Progress Bar. |
medium | boolean | Sets the stroke and container sizes for the medium-sized variant. |
progress | number | Sets the progress bar length. |
small | boolean | Sets the stroke and container sizes for the small variant. |