juxt.ui

Forms

Progress

A horizontal bar showing how far a task has gotten, or that it’s still running.

Uploading64%
Copy
<script setup lang="ts">
const value = ref(64)
</script>

<template>
  <JProgress :value="value" label="Uploading" show-value />
</template>

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

Copy
import { JProgress } from '@juxtui/ui'

Usage #

Copy
<JProgress :value="64" label="Uploading" show-value />

Pass null (or leave value unset) for an indeterminate bar — a soft highlight sweeps across it instead of showing a fraction. Under reduced motion it pulses in place rather than sliding.

Variants & examples #

Indeterminate#

Unknown duration: value is null.

Preparing your download
Copy
<script setup lang="ts">
</script>

<template>
  <JProgress :value="null" label="Preparing your download" />
</template>

Sizes and variants#

Storage used72%
Disk usage30%
Copy
<script setup lang="ts">
</script>

<template>
  <div class="flex w-full flex-col gap-5">
    <JProgress :value="72" size="md" label="Storage used" show-value />
    <JProgress :value="30" size="sm" variant="neutral" label="Disk usage" show-value />
  </div>
</template>

API #

Props

PropTypeDefault Description
valuenumber | nullnullCurrent value out of max. null shows an indeterminate bar.
maxnumber100Value representing full progress.
size'sm' | 'md''md'Bar height.
labelstring—Visible label above the bar; also its accessible name.
showValuebooleanfalseShow the percentage next to the label. Hidden while indeterminate.
variant'accent' | 'neutral''accent'accent for progress toward a goal, neutral for plain measurement.

Accessibility #

  • Renders role="progressbar" with aria-valuemin, aria-valuemax and aria-valuenow set from value and max; aria-valuenow is omitted while indeterminate, matching the native semantics for “busy, unknown duration”.
  • aria-valuetext reads the percentage, or “Loading” while indeterminate, so the announcement matches what showValue displays.
  • When there’s a label, the track is labelled by it via aria-labelledby; without one, pass your own accessible name through the surrounding markup.