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

// scss
// @use '@material/circular-progress/mixins' as circular-progress-mixins;
// $colors: (purple, pink, teal, gray);
// .mdc-circular-progress {
//   @include circular-progress-mixins.indeterminate-colors($colors);
// }

// jsx
<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. |