Progress

A progress bar displaying task completion status.

Progress

Nuxt UI

Git

Usage

Use the v-model directive to control the value of the Progress.

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(24)
</script>

<template>
  <B24Progress v-model="value" />
</template>

Max

Use the max prop to set the maximum value of the Progress.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  max?: number
}

withDefaults(defineProps<ExampleProps>(), {
  max: 100
})

const value = ref(24)
</script>

<template>
  <B24Progress
    v-model="value"
    :max="max"
  />
</template>

Use the max prop with an array of strings to display the active step under the bar, the maximum value of the Progress is the length of the array.

Details

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(3)
</script>

<template>
  <B24Progress
    v-model="value"
    :max="['Prospecting...', 'Qualifying...', 'Presenting...', 'Negotiating...', 'Closed!']"
  />
</template>

Status

Use the status prop to display the current Progress value above the bar.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  isStatus?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isStatus: true
})

const value = ref(24)
</script>

<template>
  <B24Progress
    v-model="value"
    :status="isStatus"
  />
</template>

Indeterminate

When no v-model is set or the value is null, the Progress becomes indeterminate. The progress bar is animated as a loading, but you can change it using the animation prop.

Details

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(null)
</script>

<template>
  <B24Progress v-model="value" />
</template>

Animation

Use the animation prop to change the animation of the Progress to an inverse carousel, a swinging bar or an elastic bar. Defaults to loading.

Details

<script setup lang="ts">
import type { ProgressProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  animation?: ProgressProps['animation']
}

withDefaults(defineProps<ExampleProps>(), {
  animation: 'swing' as const
})
</script>

<template>
  <B24Progress
    :animation="animation"
  />
</template>

Orientation

Use the orientation prop to change the orientation of the Progress. Defaults to horizontal.

Details

<script setup lang="ts">
import type { ProgressProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  orientation?: ProgressProps['orientation']
}

withDefaults(defineProps<ExampleProps>(), {
  orientation: 'horizontal' as const
})
</script>

<template>
  <B24Progress
    :orientation="orientation"
  />
</template>

Color

Use the color prop to change the color of the Slider.

Details

<script setup lang="ts">
import type { ProgressProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  color?: ProgressProps['color']
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default' as const
})
</script>

<template>
  <B24Progress
    :color="color"
  />
</template>

Size

Use the size prop to change the size of the Slider.

Details

<script setup lang="ts">
import type { ProgressProps } from '@bitrix24/b24ui-nuxt'

export interface ExampleProps {
  size?: ProgressProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md' as const
})
</script>

<template>
  <B24Progress
    :size="size"
  />
</template>

Inverted

Use the inverted prop to visually invert the Progress.

Details

<script setup lang="ts">
import { ref } from 'vue'

export interface ExampleProps {
  isInverted?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isInverted: true
})

const value = ref(24)
</script>

<template>
  <B24Progress
    v-model="value"
    :inverted="isInverted"
  />
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
max		number | any[] The maximum progress value.
status		boolean Display the current progress value.
inverted	false	boolean Whether the progress is visually inverted.
size		"lg" | "md" | "xs" | "sm"
color		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
orientation	"horizontal"	"vertical" | "horizontal" The orientation of the progress bar.
animation		"loading" | "carousel" | "carousel-inverse" | "swing" | "elastic"
b24ui		Partial<{ root: string; base: string; indicator: string; status: string; steps: string; step: (typeof step)[number]; }>
modelValue	null	null | number The progress value. Can be bind as `v-model`.
getValueLabel		(value: number, max: number): string A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.

Slots

Slot	Type
status	{ percent?: number; }

Emits

Event	Type