TkxProgress

Live updating

Uploading…0%

import { TkxProgress } from 'tekivex-ui';

<TkxProgress value={66} />
<TkxProgress value={66} max={100} label="Uploading" />

Variants

Primary25%

Success50%

Warning75%

Danger90%

<TkxProgress value={50} variant="linear" />     {/* default */}
<TkxProgress value={50} variant="circular" />

Color schemes

<TkxProgress value={75} colorScheme="primary" />
<TkxProgress value={75} colorScheme="success" />
<TkxProgress value={75} colorScheme="warning" />
<TkxProgress value={75} colorScheme="danger" />

Sizes

<TkxProgress value={50} size="sm" />
<TkxProgress value={50} size="md" />   {/* default */}
<TkxProgress value={50} size="lg" />

Indeterminate

Indeterminate (no value)

Reticulating splines…

When the eventual completion is unknown:

<TkxProgress indeterminate label="Reticulating splines…" />

The bar animates continuously; screen readers announce “loading” without a percentage.

With label

<TkxProgress
  value={42}
  label="Uploading photo.jpg"
  showValue              // renders "42%" inside the bar
/>

Buffer (download / upload progress)

For two-phase progress (e.g. data downloaded vs played in a video):

<TkxProgress value={30} buffer={60} />
{/* primary fill at 30%, lighter buffer fill at 60% */}

Circular variant

Circular variant

RSC compatible

TkxProgress uses no hooks. Renders in Next.js Server Components.

Accessibility

• role="progressbar" with aria-valuemin, aria-valuemax, aria-valuenow
• Indeterminate omits aria-valuenow per WAI-ARIA spec
• aria-label derived from label prop, or pass explicitly via aria-label
• Animation respects prefers-reduced-motion — shimmer pauses, bar still reflects current value

Props

Prop	Type	Required	Description
value	number		Current progress. Omit when indeterminate.
max	number		Defaults to 100.
buffer	number		Secondary buffer fill.
variant	'linear' | 'circular'		Defaults to linear.
colorScheme	'primary' | 'success' | 'warning' | 'danger' | 'info'
size	'sm' | 'md' | 'lg'
label	string		Accessible label + optional visible label.
showValue	boolean		Show ”%”.
indeterminate	boolean		Continuous animation, no aria-valuenow.

Source

src/components/TkxProgress.tsx