Updated: This page has been updated. See DESY-179 for details.

Progress bar

The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

This component visually communicates the status of a task and it shows users how much work remains.

Anatomy

Label
Progress line
Progress bar container
Progress label

Usage

Progress bars are best when placed on the edge of a container.

Always use the same type of progress indicator for a given process across the platform. For instance, if refreshing uses a circular indicator in one view, it must use a circular indicator everywhere.

Example
HTML

Label 60%

<div class="progress-bar-wrapper">
	<div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Label" tabindex="0">
		<div class="progress-bar" style="width: 60%;"></div>
	</div>
	<div class="progress-content">
		<span class="progress-label">Label</span>
		<span class="progress-value"><span>60</span><span>%</span></span>
	</div>
</div>

Progress label

The progress label is supposed to match the progress line and have the same number value. You will have to do that manually.

Example
HTML

Label 40%

<div class="progress-bar-wrapper">
	<div class="progress" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" aria-label="Label" tabindex="0">
		<div class="progress-bar" style="width: 40%;"></div>
	</div>
	<div class="progress-content">
		<span class="progress-label">Label</span>
		<span class="progress-value"><span>40</span><span>%</span></span>
	</div>
</div>

Variants

We have two distinct colours for the progress bar component to clearly communicate the status and user context of the ongoing process.

Green
Usage: it signifies a normal, positive, or successful state.

Purple
Usage: it signifies a specific, non-standard, or emphasised process.

Example
HTML

Label 40%

<div class="d-flex flex-column gap-32">
	<div class="progress-bar-wrapper">
		<div class="progress" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" aria-label="Label, green variant" tabindex="0">
			<div class="progress-bar" style="width: 40%;"></div>
		</div>
		<div class="progress-content">
			<span class="progress-label">Label</span>
			<span class="progress-value"><span>40</span><span>%</span></span>
		</div>
	</div>
	<div class="progress-bar-wrapper">
		<div class="progress progress-purple" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" aria-label="Label, purple variant" tabindex="0">
			<div class="progress-bar" style="width: 40%;"></div>
		</div>
		<div class="progress-content">
			<span class="progress-label">Label</span>
			<span class="progress-value"><span>40</span><span>%</span></span>
		</div>
	</div>
</div>

Accessibility

Keyboard interaction

All components should be reachable via Tab and Shift + Tab keys. The focused progress bar shows a 2 px focus ring.

Example
HTML

Label 80%

<div class="progress-bar-wrapper">
	<div class="progress focus" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" aria-label="Label" tabindex="0">
		<div class="progress-bar" style="width: 80%;"></div>
	</div>
	<div class="progress-content">
		<span class="progress-label">Label</span>
		<span class="progress-value"><span>80</span><span>%</span></span>
	</div>
</div>

Label 80%

<div class="progress-bar-wrapper">
	<div class="progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" aria-label="Label" tabindex="0">
		<div class="progress-bar" style="width: 80%;"></div>
	</div>
	<div class="progress-content">
		<span class="progress-label">Label</span>
		<span class="progress-value"><span>80</span><span>%</span></span>
	</div>
</div>

Indicate to users the progress of a task, showing how much has been completed and what remains.

Example
HTML

If there is a task with a short loading time, use the Spinner component instead.

Example
HTML

screen shot 15.png 80%

<div class="progress-bar-wrapper">
	<div class="progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" aria-label="screen shot 15.png" tabindex="0">
		<div class="progress-bar" style="width: 80%;"></div>
	</div>
	<div class="progress-content">
		<span class="progress-label">screen shot 15.png</span>
		<span class="progress-value"><span>80</span><span>%</span></span>
	</div>
</div>

Use the progress bar to show either a loading state or the status of a system process.

Example
HTML

John Doe 40%

Anna Svensson 80%

<div class="d-flex flex-column gap-32">
	<div class="progress-bar-wrapper">
		<div class="progress" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" aria-label="John Doe" tabindex="0">
			<div class="progress-bar" style="width: 40%;"></div>
		</div>
		<div class="progress-content">
			<span class="progress-label">John Doe</span>
			<span class="progress-value"><span>40</span><span>%</span></span>
		</div>
	</div>
	<div class="progress-bar-wrapper">
		<div class="progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" aria-label="Anna Svensson" tabindex="0">
			<div class="progress-bar" style="width: 80%;"></div>
		</div>
		<div class="progress-content">
			<span class="progress-label">Anna Svensson</span>
			<span class="progress-value"><span>80</span><span>%</span></span>
		</div>
	</div>
</div>

Don't

Don't use the progress bar for data visualisation; use a custom component for that purpose instead.

Specs

Progress bar specifications: 8 px bar height with the label and value row below

Developer reference

The following sections describe supported functionality that is not part of the Figma design specification.

Basic design

A standalone progress bar without a label row. Set the fill width with an inline style="width: …%" and keep the role="progressbar" ARIA attributes on the .progress element in sync. The .progress-bar fill is presentational.

Example
HTML

<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="50% complete" tabindex="0">
	<div class="progress-bar" style="width: 50%;"></div>
</div>

Content Security Policy

Setting the fill width inline relies on the style attribute.

Content Security Policy (CSP) compatibility. If your project has a Content Security Policy which doesn't allow style-src 'unsafe-inline', then you won't be able to use inline style attributes to set progress bar widths as shown in our examples. Alternative methods that are compatible with strict CSPs include a little custom JavaScript (that sets element.style.width) or using custom CSS classes.

Deprecated patterns

The following classes are deprecated by the Figma redesign and will be removed in v3.0.

Deprecated in v2.7. The single 8 px bar is now the only size, so the size modifiers .progress-xs and .progress-sm no longer change the bar height. The absolutely-positioned .percentage element and the in-bar .progress-label are replaced by the .progress-content row (.progress-label + .progress-value). These will be removed in v3.0.