ProgressBar

ProgressBar shows determinate progress from current toward total. It renders as a horizontal bar, a circular ring, or a pie, and can display the raw value or a percentage.

When to use

• Show how far along a known-length operation is (uploads, imports, multi-step jobs).
• Compact circular/pie indicators for dashboards and tiles.

Import

import { ProgressBar } from '@spartanfx/react';

Basic usage

current and total are required.

<ProgressBar current={7} total={10} label="Uploading" showAsPercentage />

Circle and pie styles

import { ProgressBar, ProgressBarMode } from '@spartanfx/react';

<ProgressBar
  current={45}
  total={100}
  mode={ProgressBarMode.Circle}
  size="large"
  showValue
  showAsPercentage
/>

<ProgressBar current={3} total={4} mode={ProgressBarMode.Pie} />

Key props

Prop	Type	Default	Notes
current (required)	number	—	Current value.
total (required)	number	—	Value representing 100%.
mode	ProgressBarMode	Bar	Bar, Circle, or Pie.
showValue	boolean	false	Show the value inside the indicator.
showAsPercentage	boolean	false	Display as % instead of current/total.
size	'small' | 'medium' | 'large' | 'custom'	medium	Size preset (circle/pie).
label	string	—	Label above the indicator.
appearance	AppearanceMode	light	Light or dark theming.

See the full generated reference: ProgressBar API ↗.

See also

• Components overview