ProgressBar

import { ProgressBar } from '@bbc/front-end-kit/vue'

A flexible and interactive progress bar component supporting segmentation, click events, and slot-based customization. Useful for visualizing progress in steps or as a continuous bar.

Getting started

<template>
  <div>
    <ProgressBar :progress="0.5" :totalSegments="5" @click="onBarClick" />
  </div>
</template>

<script setup>
import { ProgressBar } from '@bbc/front-end-kit/vue'

function onBarClick(payload) {
  console.log(payload);
}
</script>

Preview

Guidelines

• Always extend or wrap the component, provide it with default values, and ensure consistency across the project.
• Use slots to customize the appearance of segments if needed.
• Try use the css variables to adjust colors and sizing first for cleaner code.

Styling

.progress-bar {
  --progress-bar-track-color: var(--c-white);
  --progress-bar-progress-color: var(--c-black);
}

API

Properties

progress

The current progress value (from 0 to 1).

Values: Number (0–1)

Default: 0

totalSegments

The number of segments to divide the progress bar into.

Values: Number

Default: 1

SegmentErrorIcon

Props to pass to the given SegmentErrorIcon component. Values: Boolean | Vue Component

Default: undefined

segmentErrorIconProps

Props to pass to the given SegmentErrorIcon component. Values: Object

Default: undefined

Events

click

Emitted when a segment or the bar is clicked.

Payload:

• currentProgress (Number): The current progress value.
• progress (Number): The progress value at the click position (0–1).
• segmentProgress (Number): The progress value of the clicked segment (0–1).
• segmentIndex (Number): The index of the clicked segment (1-based).

Slots

track-segment

Customize each segment inside the foreground progress fill (.progress-bar__segment.--bar).

Properties

• segment (Number): The segment number (1-based).
• width (Number): The width of the segment in pixels.
• index (Number): The segment index (1-based).

bar-segment

Customize each segment inside the background track (.progress-bar__segment.--track).

Properties

• segment (Number): The segment number (1-based).
• width (Number): The width of the segment in pixels.
• index (Number): The segment index (1-based).

Styling

The component uses CSS variables for easy customization:

• --progress-bar-progress: Progress width (set automatically)
• --progress-bar-segment-width: Segment width (set automatically)
• --progress-bar-transition-duration: Transition duration
• --progress-bar-track-height: Height of the bar
• --progress-bar-track-color: Track background color
• --progress-bar-progress-color: Progress color