ProgressBar

import { ProgressBar } from 'cx/widgets';

The ProgressBar accepts values between 0 and 1 to indicate the state of progress.

 <LabelsTopLayout>
  <Slider
    value={m.progress}
    minValue={0}
    maxValue={1}
    step={0.01}
    label="Progress:"
  />
  <LabelsTopLayoutCell style="vertical-align: middle">
    <ProgressBar
      value={m.progress}
      text={format(m.progress, "p;0")}
      style="height: 20px"
    />
  </LabelsTopLayoutCell>
</LabelsTopLayout> 
 interface PageModel {
  progress: number;
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { ProgressBar, Slider } from "cx/widgets";
import { LabelsTopLayout, LabelsTopLayoutCell, format } from "cx/ui"; 

Progress:

Configuration

Property	Type	Description
`value`	`number`	Progress value between `0` and `1`. Default is `0`.
`text`	`string`	Annotation text displayed on the progress bar.
`disabled`	`boolean`	Set to `true` to make the progress bar appear disabled.
`baseClass`	`string`	Base CSS class. Default is `progressbar`.
`className`	`string`	Additional CSS class to apply.
`style`	`string \| object`	Additional styles to apply.