Progress
Show exact task completion or an explicitly indeterminate operation.
Usage
Known progress
Expose the known amount completed against an explicit maximum.
Expose the known amount completed against an explicit maximum.
<!-- Progress / Determinate -->
<script setup lang="ts">
import { ProgressRoot, ProgressTrack, ProgressIndicator, ProgressValueText } from '@sectile/vue/progress'
</script>
<template>
<ProgressRoot value="64" label="Upload progress" v-slot="{ status }">
<ProgressTrack><ProgressIndicator /></ProgressTrack>
<ProgressValueText />
<span aria-hidden="true">{{ status }}</span>
</ProgressRoot>
</template>Unknown progress
Represent work whose completed amount is not yet known.
Represent work whose completed amount is not yet known.
<!-- Progress / Indeterminate -->
<script setup lang="ts">
import { ProgressRoot, ProgressTrack, ProgressIndicator, ProgressValueText } from '@sectile/vue/progress'
</script>
<template>
<ProgressRoot label="Upload progress" v-slot="{ status }">
<ProgressTrack><ProgressIndicator /></ProgressTrack>
<ProgressValueText />
<span aria-hidden="true">{{ status }}</span>
</ProgressRoot>
</template>Complete
Expose the terminal state when the current value reaches the maximum.
Expose the terminal state when the current value reaches the maximum.
<!-- Progress / Complete -->
<script setup lang="ts">
import { ProgressRoot, ProgressTrack, ProgressIndicator, ProgressValueText } from '@sectile/vue/progress'
</script>
<template>
<ProgressRoot value="100" label="Upload progress" v-slot="{ status }">
<ProgressTrack><ProgressIndicator /></ProgressTrack>
<ProgressValueText />
<span aria-hidden="true">{{ status }}</span>
</ProgressRoot>
</template>Exact decimal
Enter 0.1 as decimal text and preserve it without binary floating-point coercion.
Enter 0.1 as decimal text and preserve it without binary floating-point coercion.
<!-- Progress / Exact Decimal -->
<script setup lang="ts">
import { ProgressRoot, ProgressTrack, ProgressIndicator, ProgressValueText } from '@sectile/vue/progress'
</script>
<template>
<ProgressRoot value="0.1" max="0.3" label="Upload progress" v-slot="{ status }">
<ProgressTrack><ProgressIndicator /></ProgressTrack>
<ProgressValueText />
<span aria-hidden="true">{{ status }}</span>
</ProgressRoot>
</template>API
Vue package: @sectile/vue/progress
ProgressRootProgressTrackProgressIndicatorProgressValueText
Props
ProgressRootProps
asElement or component rendered for this part.
asChildWhether to merge this part into its single child instead of rendering a wrapper.
formatValueFormats a value for visible text.
labelAccessible name announced for the control.
maxLargest value accepted by the component.
valueCurrent value exposed by this contract.
ProgressPartProps
asElement or component rendered for this part.
asChildWhether to merge this part into its single child instead of rendering a wrapper.
Slots
ProgressRootSlotProps
maxMaximum of the numeric range.
percentageCurrent value expressed as a percentage of its range.
statusCurrent lifecycle status.
valueCurrent value exposed by this contract.
valueTextFormatted text for the current range value when available.
Other types
ProgressValueFormatter
type ProgressValueFormatter = (value: string) => stringParts
Shared scope: [data-scope="progress"]. Combine it with a part selector to keep styles local to this component.
| Part | Selector | Role | Extra attributes |
|---|---|---|---|
root | [data-part="root"] | Exposes determinate completion or an explicitly unknown amount of progress. | role="progressbar"data-status="<status>"data-percentage="<percentage>" |
track | [data-part="track"] | Provides the visual path for task completion. | — |
indicator | [data-part="indicator"] | Fills the exact known percentage without duplicating accessible semantics. | aria-hidden="true"data-status="<status>"data-percentage="<percentage>" |
value-text | [data-part="value-text"] | Displays the formatted value as text. | — |
Keyboard interaction
| Key | Behavior |
|---|---|
| None | The range display is read-only and defines no keyboard interaction. |
Accessibility
The named progress bar exposes zero and its maximum, omitting the current value and value text while progress is indeterminate.