Progress

Show 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="Complete"></certara-progress>

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

<CertaraProgress value={100} variant="success" label="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="100" variant="success" label="Complete"></certara-progress>

Error

Toggle dark mode

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

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

<CertaraProgress value={30} variant="error" 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="error" label="Error"></certara-progress>

certara-progress

Properties

animated

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

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" | "error" | "success"
Default	'brand'
Required	false
Description	The color variant of the progress bar

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