Progress

A progress bar displaying task completion status.

Usage

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

modelValue

{
  "wait": "Loading client-side content..."
}

Max

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

modelValue

max

{
  "wait": "Loading client-side content..."
}

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.

modelValue

Prospecting...

Qualifying...

Presenting...

Negotiating...

Closed!

{
  "wait": "Loading client-side content..."
}

Status

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

modelValue

status

24%

{
  "wait": "Loading client-side content..."
}

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.

{
  "wait": "Loading client-side content..."
}

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.

animation

{
  "wait": "Loading client-side content..."
}

Orientation

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

orientation

{
  "wait": "Loading client-side content..."
}

Color

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

color

{
  "wait": "Loading client-side content..."
}

Size

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

size

{
  "wait": "Loading client-side content..."
}

Inverted

Use the inverted prop to visually invert the Progress.

inverted

modelValue

{
  "wait": "Loading client-side content..."
}

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`	`'md'`	`"xs" \| "sm" \| "md" \| "lg"`
`color`	`'air-primary'`	`"air-primary" \| "air-primary-success" \| "air-primary-alert" \| "air-primary-warning" \| "air-primary-copilot" \| "air-secondary"`
`orientation`	`'horizontal'`	`"horizontal" \| "vertical"` The orientation of the progress bar.
`animation`	`'loading'`	`"carousel" \| "loading" \| "carousel-inverse" \| "swing" \| "elastic"`
`getValueLabel`		`(value: number \| null , max: number): string \| undefined` A function to get the accessible label text 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.
`getValueText`		`(value: number \| null , max: number): string \| undefined` A function to get the accessible value text representing the current value in a human-readable format.
`modelValue`	`null`	`null \| number` The progress value. Can be bind as `v-model`.
`b24ui`		`{ root?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; status?: ClassNameValue; steps?: ClassNameValue; step?: ClassNameValue; }`

Slots

Slot	Type
`status`	`{ percent?: number \| undefined; }`

Emits

Event	Type
`update:modelValue`	`[value: string[] \| undefined]`
`update:max`	`[value: number]`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    progress: {
      slots: {
        root: 'gap-2',
        base: 'relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5)',
        indicator: 'rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background)',
        status: 'flex justify-end text-(--b24ui-typography-legend-color) transition-[width] duration-200',
        steps: 'grid items-end text-(--b24ui-typography-legend-color)',
        step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
      },
      variants: {
        animation: {
          loading: '',
          carousel: '',
          'carousel-inverse': '',
          swing: '',
          elastic: ''
        },
        color: {
          'air-primary': {
            root: 'style-filled'
          },
          'air-primary-success': {
            root: 'style-filled-success'
          },
          'air-primary-alert': {
            root: 'style-filled-alert'
          },
          'air-primary-copilot': {
            root: 'style-filled-copilot'
          },
          'air-primary-warning': {
            root: 'style-filled-warning'
          },
          'air-secondary': {
            root: 'style-tinted'
          },
          default: {
            root: 'style-old-default'
          },
          danger: {
            root: 'style-old-danger'
          },
          success: {
            root: 'style-old-success'
          },
          warning: {
            root: 'style-old-warning'
          },
          primary: {
            root: 'style-old-primary'
          },
          secondary: {
            root: 'style-old-secondary'
          },
          collab: {
            root: 'style-old-collab'
          },
          ai: {
            root: 'style-old-ai'
          }
        },
        size: {
          xs: {
            status: 'text-(length:--ui-font-size-xs)/(--ui-font-line-height-sm)',
            steps: 'text-(length:--ui-font-size-xs)/(--ui-font-line-height-sm)'
          },
          sm: {
            status: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)',
            steps: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)'
          },
          md: {
            status: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)',
            steps: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)'
          },
          lg: {
            status: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)',
            steps: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)'
          }
        },
        step: {
          active: {
            step: 'opacity-100'
          },
          first: {
            step: 'opacity-100 text-(--b24ui-typography-legend-color)'
          },
          other: {
            step: 'opacity-0'
          },
          last: {
            step: ''
          }
        },
        orientation: {
          horizontal: {
            root: 'w-full flex flex-col',
            base: 'w-full',
            status: 'flex-row'
          },
          vertical: {
            root: 'h-full flex flex-row-reverse',
            base: 'h-full',
            status: 'flex-col min-w-[32px]'
          }
        },
        inverted: {
          true: {
            status: 'self-end'
          }
        }
      },
      compoundVariants: [
        {
          inverted: true,
          orientation: 'horizontal',
          class: {
            step: 'text-start',
            status: 'flex-row-reverse'
          }
        },
        {
          inverted: true,
          orientation: 'vertical',
          class: {
            steps: 'items-start',
            status: 'flex-col-reverse'
          }
        },
        {
          orientation: 'horizontal',
          size: 'xs',
          class: 'h-[2px]'
        },
        {
          orientation: 'horizontal',
          size: 'sm',
          class: 'h-[4px]'
        },
        {
          orientation: 'horizontal',
          size: 'md',
          class: 'h-[8px]'
        },
        {
          orientation: 'horizontal',
          size: 'lg',
          class: 'h-[12px]'
        },
        {
          orientation: 'vertical',
          size: 'xs',
          class: 'w-[2px]'
        },
        {
          orientation: 'vertical',
          size: 'sm',
          class: 'w-[4px]'
        },
        {
          orientation: 'vertical',
          size: 'md',
          class: 'w-[8px]'
        },
        {
          orientation: 'vertical',
          size: 'lg',
          class: 'w-[12px]'
        },
        {
          orientation: 'horizontal',
          animation: 'carousel',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'carousel',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'carousel-inverse',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'carousel-inverse',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'swing',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'swing',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'elastic',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'elastic',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]'
          }
        },
        {
          orientation: 'horizontal',
          animation: 'loading',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]'
          }
        },
        {
          orientation: 'vertical',
          animation: 'loading',
          class: {
            indicator: 'data-[state=indeterminate]:animate-[progressbar-loading-vertical_2s_infinite]'
          }
        }
      ],
      defaultVariants: {
        color: 'air-primary',
        animation: 'loading',
        size: 'md'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        progress: {
          slots: {
            root: 'gap-2',
            base: 'relative overflow-hidden rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5)',
            indicator: 'rounded-(--ui-border-radius-pill) size-full transition-transform duration-200 ease-out bg-(--b24ui-background)',
            status: 'flex justify-end text-(--b24ui-typography-legend-color) transition-[width] duration-200',
            steps: 'grid items-end text-(--b24ui-typography-legend-color)',
            step: 'truncate text-end row-start-1 col-start-1 transition-opacity'
          },
          variants: {
            animation: {
              loading: '',
              carousel: '',
              'carousel-inverse': '',
              swing: '',
              elastic: ''
            },
            color: {
              'air-primary': {
                root: 'style-filled'
              },
              'air-primary-success': {
                root: 'style-filled-success'
              },
              'air-primary-alert': {
                root: 'style-filled-alert'
              },
              'air-primary-copilot': {
                root: 'style-filled-copilot'
              },
              'air-primary-warning': {
                root: 'style-filled-warning'
              },
              'air-secondary': {
                root: 'style-tinted'
              },
              default: {
                root: 'style-old-default'
              },
              danger: {
                root: 'style-old-danger'
              },
              success: {
                root: 'style-old-success'
              },
              warning: {
                root: 'style-old-warning'
              },
              primary: {
                root: 'style-old-primary'
              },
              secondary: {
                root: 'style-old-secondary'
              },
              collab: {
                root: 'style-old-collab'
              },
              ai: {
                root: 'style-old-ai'
              }
            },
            size: {
              xs: {
                status: 'text-(length:--ui-font-size-xs)/(--ui-font-line-height-sm)',
                steps: 'text-(length:--ui-font-size-xs)/(--ui-font-line-height-sm)'
              },
              sm: {
                status: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)',
                steps: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)'
              },
              md: {
                status: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)',
                steps: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)'
              },
              lg: {
                status: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)',
                steps: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm)'
              }
            },
            step: {
              active: {
                step: 'opacity-100'
              },
              first: {
                step: 'opacity-100 text-(--b24ui-typography-legend-color)'
              },
              other: {
                step: 'opacity-0'
              },
              last: {
                step: ''
              }
            },
            orientation: {
              horizontal: {
                root: 'w-full flex flex-col',
                base: 'w-full',
                status: 'flex-row'
              },
              vertical: {
                root: 'h-full flex flex-row-reverse',
                base: 'h-full',
                status: 'flex-col min-w-[32px]'
              }
            },
            inverted: {
              true: {
                status: 'self-end'
              }
            }
          },
          compoundVariants: [
            {
              inverted: true,
              orientation: 'horizontal',
              class: {
                step: 'text-start',
                status: 'flex-row-reverse'
              }
            },
            {
              inverted: true,
              orientation: 'vertical',
              class: {
                steps: 'items-start',
                status: 'flex-col-reverse'
              }
            },
            {
              orientation: 'horizontal',
              size: 'xs',
              class: 'h-[2px]'
            },
            {
              orientation: 'horizontal',
              size: 'sm',
              class: 'h-[4px]'
            },
            {
              orientation: 'horizontal',
              size: 'md',
              class: 'h-[8px]'
            },
            {
              orientation: 'horizontal',
              size: 'lg',
              class: 'h-[12px]'
            },
            {
              orientation: 'vertical',
              size: 'xs',
              class: 'w-[2px]'
            },
            {
              orientation: 'vertical',
              size: 'sm',
              class: 'w-[4px]'
            },
            {
              orientation: 'vertical',
              size: 'md',
              class: 'w-[8px]'
            },
            {
              orientation: 'vertical',
              size: 'lg',
              class: 'w-[12px]'
            },
            {
              orientation: 'horizontal',
              animation: 'carousel',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-rtl_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'carousel',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'carousel-inverse',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite] data-[state=indeterminate]:rtl:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'carousel-inverse',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'swing',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'swing',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'elastic',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'elastic',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]'
              }
            },
            {
              orientation: 'horizontal',
              animation: 'loading',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[progressbar-loading_2s_infinite]'
              }
            },
            {
              orientation: 'vertical',
              animation: 'loading',
              class: {
                indicator: 'data-[state=indeterminate]:animate-[progressbar-loading-vertical_2s_infinite]'
              }
            }
          ],
          defaultVariants: {
            color: 'air-primary',
            animation: 'loading',
            size: 'md'
          }
        }
      }
    })
  ]
})

Kbd

A kbd element for indicating a keyboard input.

Separator

Divides content in a horizontal or vertical manner.