lab components / Data Visualization

Multi Segment Progess Bar

Visually communicate the progress of a specific process and its sub-processes.

Multi-segment progress bar vs. Progress bar Examples Guidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { MultiSegmentProgressBar } from "@siteimprove/fancylab";

#Multi-segment progress bar vs. Progress bar

Component	Purpose	Usage guideline	Examples
Multi-Segment Progress Bar	Shows progress through distinct steps/phases.	Helps users understand where they are in a process and what comes next.	Multi-step forms, wizards, complex flows.
Progress Bar	Shows overall progress of a single process.	Indicates how much of a task is complete.	File uploads, loading content.

#Examples

A visual component that displays progress towards multiple goals or targets within a single container. It utilizes stacked segments to represent each goal's progress and overall completion status.

Composition:

Container: The overall bounding box of the component.
Segments: Individual bars or sections representing each goal or target.
Label (recommended): Text elements that describe the segments.
Values (recommended): Numerical or percentage indicators of progress for each segment.

#Basic usage

This showcases the progress bar in its most common form, with filled segments indicating completed steps and an empty segment representing the step currently in progress.

CodeHTML output

<MultiSegmentProgressBar
	size={"medium"}
	total={240}
	segments={[
		{ value: 15, color: ColorGreen, tooltip: "15 out of 240" },
		{ value: 10, color: ColorBlue, tooltip: "10 out of 240" },
		{ value: 25, color: ColorRed, tooltip: "25 out of 240" },
		{ value: 35, color: ColorYellow, tooltip: "35 out of 240" },
		{ value: 70, color: ColorPink, tooltip: "70 out of 240" },
		{ value: 5, color: ColorPurple, tooltip: "5 out of 240" },
		{ value: 0, color: ColorBlack, tooltip: "0 out of 240" }, // this one is not rendered, because value: 0
	]}
/>

#Empty

This illustrates the progress bar's initial state, where no steps have been completed yet. All segments are in the "empty" or "inactive" state.

CodeHTML output

<MultiSegmentProgressBar size={"medium"} total={240} segments={[]} />

#Sizes

This demonstrates the flexibility of the multi-segment progress bar, showing how it can adapt to different heights and widths to fit within various layouts and design requirements.

Small

Medium

Large

CodeHTML output

<div>
	<div style={{ marginTop: "0.625rem" }}>
		<H4>Small</H4>
		<MultiSegmentProgressBar
			size={"small"}
			total={500}
			segments={[
				{ value: 300, color: ColorBlue, tooltip: "300 out of 500" },
				{ value: 35, color: ColorYellow, tooltip: "35 out of 500" },
			]}
		/>
	</div>
	<div style={{ marginTop: "0.625rem" }}>
		<H4>Medium</H4>
		<MultiSegmentProgressBar
			size={"medium"}
			total={900}
			segments={[
				{ value: 300, color: ColorBlue, tooltip: "300 out of 900" },
				{ value: 35, color: ColorYellow, tooltip: "35 out of 900" },
			]}
		/>
	</div>
	<div style={{ marginTop: "0.625rem" }}>
		<H4>Large</H4>
		<MultiSegmentProgressBar
			size={"large"}
			total={700}
			segments={[
				{ value: 300, color: ColorBlue, tooltip: "300 out of 700" },
				{ value: 35, color: ColorYellow, tooltip: "35 out of 700" },
			]}
		/>
	</div>
</div>

This highlights the ability to customize the appearance of individual segments. Here, you can see different colors, patterns, or textures applied to segments, allowing for greater visual differentiation and customization.

CodeHTML output

<MultiSegmentProgressBar
	size={"large"}
	total={100}
	segments={[
		{ value: 10, color: ColorGreen, tooltip: "10 out of 100" },
		{
			value: 80,
			color: ColorGreenLighter,
			tooltip: "80 out of 100",
			style: {
				border: `dashed ${ColorGreen}`,
				borderWidth: "2px 2px 2px 0",
			},
			/* or use
			className: "someClassName"
			*/
		},
	]}
/>

CodePropsHTML output

Property	Description	Defined	Value
totalRequired	`number`The maximum total value of all segments. This determines the scale of the progress bar.	YesNo
segmentsRequired	`object[]`	YesNo
sizeOptional	`"large" \| "medium" \| "small"`	YesNo
disableInitialAnimationOptional	`boolean`If true, there is no animation on first render. If values change after first render, there is an animation.	YesNo	truefalse
data-observe-keyOptional	`string`Unique string, used by external script e.g. for event tracking	YesNo
classNameOptional	`string`Custom className that's applied to the outermost element (only intended for special cases)	YesNo
styleOptional	`object`Style object to apply custom inline styles (only intended for special cases)	YesNo

The process has clearly defined, sequential steps or phases.
You want to show progress within each step, in addition to overall progress.
The user benefits from knowing which step is currently active.
Visualizing the distribution of resources across different categories (e.g., budget allocation, team workload).

#Placement

MultiSegmentProgressBar is typically used in the following places:

Within Card: To indicate progress within a specific task or process.
Form/Wizard Completion: Indicating progress through multi-step forms or processes.

#Style

Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your MultiSegmentProgressBar to existing components for visual consistency.
The primary goal is to communicate progress clearly and quickly. Avoid cluttering the component with excessive details or unnecessary visual elements.
Use distinct colors for each segment to clearly differentiate them.
Use a consistent color scheme that aligns with overall design system. See Design tokens.
Clearly label each segment to indicate its purpose.
Avoid overwhelming users with too many segments. Aim for 5-7 segments or less.
Make sure segments are wide enough to be easily distinguishable.
Segment order: Arrange segments logically. Options include:
- Most important first: Place the most critical goal or largest segment at the top.
- Sequential: Order segments to match the workflow or process they represent.
Place labels in a way that avoids visual clutter and maintains readability.,
Value Indicators (Within Tooltip):
- Clear values: Display values using a legible font size and format.
- Percentage vs. Absolute: Consider which format is most meaningful for your users.

#Interaction

Tooltips: Provide additional details on hover or focus for each segment.
Responsiveness: Ensure the component adapts gracefully to different screen sizes and orientations.