Progress

A determinate or indeterminate progress bar.

import { ... } from '@corndev/ui'

HTML

<div class="corn-progress" data-size="md" role="progressbar" aria-valuenow="40">
  <div class="corn-progress-bar" style="width: 40%"></div>
</div>

Classes

Class
`.corn-progress`
`.corn-progress-bar`

Attributes

Attribute	Values
`data-size`	`sm\|md\|lg`
`data-indeterminate`	`present or absent`

Vanilla JS

Required for behaviour — adds creates and updates the inner bar element.

import { createProgress } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createProgress(el, { /* options */ });

Options

Option	Type	Default	Description
`value`	`number`	`0`	Current value (0–max). Ignored when indeterminate.
`max`	`number`	`100`	Maximum value.
`size`	`'sm'\|'md'\|'lg'`	`'md'`
`indeterminate`	`boolean`	`false`	Show an animated, value-less bar.
`label`	`string`	`'Loading'`	Accessible label.

React

Progress — from @corndev/ui-react.

The props are the same as the options above, plus className.

A progress bar (role="progressbar") for tracking a task. Pass value/max for a determinate bar, or indeterminate for an animated, value-less one.

Determinate — 20%

Indeterminate

Usage

import { Progress } from '@corndev/ui-react';

<Progress value={60} />
<Progress value={3} max={5} size="lg" />
<Progress indeterminate />

import { createProgress } from '@corndev/ui';
const p = createProgress(document.querySelector('#bar'), { value: 0 });
p.update({ value: 75 });