Progress

#Basic usage

Copying the archive42%

progress/basic.vue

<script setup lang="ts">
import { Progress } from "@bysages/vue";
</script>

<template>
  <Progress.Root :default-value="42">
    <Progress.Label>Copying the archive</Progress.Label>
    <Progress.ValueText />
    <Progress.Track>
      <Progress.Range />
    </Progress.Track>
  </Progress.Root>
</template>

#Props

#CircleRange

A styled part — no props of its own; it takes the anatomy's shared styling.

#CircleTrack

A styled part — no props of its own; it takes the anatomy's shared styling.

#Circle

A styled part — no props of its own; it takes the anatomy's shared styling.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Range

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the groove ladder — the track's thickness.
`defaultValue`	`number \| null`	`50`	The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar.
`formatOptions`	`Intl.NumberFormatOptions`	`{ style: "percent" }`	The options to use for formatting the value.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; track: string; label: string; circle: string; }>`		The ids of the elements in the progress bar. Useful for composition.
`locale`	`string`	`"en-US"`	The locale to use for formatting the value.
`max`	`number`	`100`	The maximum allowed value of the progress bar.
`min`	`number`	`0`	The minimum allowed value of the progress bar.
`modelValue`	`number \| null`		The v-model value of the progress
`orientation`	`'horizontal' \| 'vertical'`	`"horizontal"`	The orientation of the element.
`translations`	`progress.IntlTranslations`		The localized messages to use.

#Track

A styled part — no props of its own; it takes the anatomy's shared styling.

#ValueText

A styled part — no props of its own; it takes the anatomy's shared styling.

#View

Prop	Type	Default	Description
`state`	`ProgressState`		—