Progress

Design guidelines

Code

Framework

HTML

React

Angular

Determinate

Toggle dark mode

<certara-progress value="50" label="Progress" help-text="50% complete"></certara-progress>

import { CertaraProgress } from '@certara/certara-ui-react';

<CertaraProgress value={50} label="Progress" helpText="50% complete" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-progress value="50" label="Progress" help-text="50% complete"></certara-progress>

Indeterminate

Toggle dark mode

<certara-progress indeterminate label="Loading..."></certara-progress>

import { CertaraProgress } from '@certara/certara-ui-react';

<CertaraProgress indeterminate label="Loading..." />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-progress indeterminate label="Loading..."></certara-progress>

Animated

Toggle dark mode

<certara-progress value="75" animated label="Uploading" help-text="75% complete"></certara-progress>

import { CertaraProgress } from '@certara/certara-ui-react';

<CertaraProgress value={75} animated label="Uploading" helpText="75% complete" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-progress value="75" animated label="Uploading" help-text="75% complete"></certara-progress>

Variants

Framework

HTML

React

Angular

Brand

Toggle dark mode

<certara-progress value="60" variant="brand" label="Brand"></certara-progress>

import { CertaraProgress } from '@certara/certara-ui-react';

<CertaraProgress value={60} variant="brand" label="Brand" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-progress value="60" variant="brand" label="Brand"></certara-progress>

Success

Toggle dark mode

<certara-progress value="100" variant="success" label="Success"></certara-progress>

import { CertaraProgress } from '@certara/certara-ui-react';

<CertaraProgress value={100} variant="success" label="Success" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-progress value="100" variant="success" label="Success"></certara-progress>

Danger

Toggle dark mode

<certara-progress value="30" variant="danger" label="Error"></certara-progress>

import { CertaraProgress } from '@certara/certara-ui-react';

<CertaraProgress value={30} variant="danger" label="Error" />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-progress value="30" variant="danger" label="Error"></certara-progress>

certara-progress

Determinate or indeterminate progress bar.

Properties

animated

Attribute	animated
Type	boolean
Default	false
Required	false
Description	Whether the progress bar displays a striped animation

color

Attribute	color
Type	"brand" | "danger" | "success"
Default	undefined
Required	false
Description	The color variant of the progress bar. Defaults to brand.

helpText

Attribute	help-text
Type	string
Default	undefined
Required	false
Description	The help text of the progress bar

indeterminate

Attribute	indeterminate
Type	boolean
Default	false
Required	false
Description	Whether the progress bar is indeterminate, if true, the value prop is ignored

label

Attribute	label
Type	string
Default	undefined
Required	false
Description	The label of the progress bar

value

Attribute	value
Type	number
Default	null
Required	false
Description	The value of the progress bar (0-100%)

variant

Attribute	variant
Type	"brand" | "danger" | "success"
Default	undefined
Required	false
Description	The color variant of the progress bar DEPRECATED. Use color instead. Will be removed in the next major version.

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

There are no slots available for this component

Progress bars provide users with feedback regarding the duration and progression of a process. Depending on the type used, they can indicate how long a user will be waiting or simply that the system is processing something.

Design guidelines

Variants

Determinate

Toggle dark mode

Indeterminate

Toggle dark mode

In practice

• Use a determinate progress bar to indicate the status of an ongoing process whenever the completion percentage is known.
• When a specific completion amount is not known, the indeterminate progress bar can be used.
• For very short process times, use the spinner component.
• When indicating a full page load, use the skeleton loader.

Accessibility

• Always provide an accessible label for progress bars.
• A comprehensive progress bar must have these attributes:
  • role="progressbar" for progress bar element to define it is the progress bar.
  • aria-valuenow="0" it is the same as <progress value="0"> that should be added to the progress bar.
  • aria-valuemin="0" & aria-valuemax="100" like <progress min="0" max="100">
• For more information, see our accessibility guidelines.

Design resources

View component in Figma