Progress

A progress component displays a horizontal linear indicator of an action in progress.

• If it contains a value attribute, the indicator shows how far the action has progressed towards completion (referred to as a determinate state).

• If there is no value attribute, the indicator simply displays an animated line until the action has been completed (referred to as an indeterminate state).

Alternatively, you can indicate progress using the progress ring component, which displays progress using a circular indicator.

Use cases:

• progress indicators
• metric visualisation

Example

The example below shows two simple indicators. The first has a value of 50 against a max of 100, so it indicates that the action is 50% percent complete. The second is indeterminate, so it simply shows the animated line.

Genesis

Declaration

<rapid-progress></rapid-progress>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-progress min="0" max="100" value="50"></rapid-progress>
    <rapid-progress min="0" max="100" ></rapid-progress>
  `,
})
export class MyElement extends GenesisElement {
}

React

Declaration

  <rapid-progress></rapid-progress>

Usage

export function MyComponent() {
  return (
    <rapid-progress min="0" max="100" value="50"></rapid-progress>
    <rapid-progress min="0" max="100" ></rapid-progress>
  );
}

Angular

Declaration

  <rapid-progress></rapid-progress>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
      <rapid-progress min="0" max="100" value="50"></rapid-progress>
      <rapid-progress min="0" max="100" ></rapid-progress>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Attributes

Name	Type	Description	Example
value	number	The value of progress to be shown.	<rapid-progress value="75">
min	number	The minimum value of progress.	<rapid-progress value="0">
max	number	The maximum value of progress.	<rapid-progress max="100">

Properties

The properties of this component are all controlled via attributes.

Slots

Name	Description
indeterminate	The content shown when no value is set (no progress is made).
determinate	The content shown when a value is set (some progress is made).

Parts

Name	Description
progress	Available for the determinate progress slot.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.