ProgressIndicator

ProgressIndicator renders a Windows 98 progress bar with smooth or tiled fill.

Props

Prop	Type	Default	Description
`value`	`number`	required	Progress percentage, clamped from 0 to 100.
`variant`	`'default' \| 'tile'`	`'default'`	Smooth fill or segmented blocks.
`hideValue`	`boolean`	`false`	Hides percentage text.
`shadow`	`boolean`	`true`	Toggles the inner sunken frame.

Examples

Progress variants

42%

100%

import { ProgressIndicator } from '@murasaki/react98'
 
export function ProgressIndicatorBasicDemo(): React.ReactElement {
  return (
    <div className="flex w-72 flex-col gap-3">
      <ProgressIndicator value={42} />
      <ProgressIndicator value={72} variant="tile" hideValue />
      <ProgressIndicator value={100} shadow={false} />
    </div>
  )
}

ARIA

ProgressIndicator exposes role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow.

Keyboard

ProgressIndicator is read-only and has no keyboard behavior.

SSR

The tile variant measures width after mount. The value remains accessible before measurement completes.