Progress Ring

The Progress and Progress Ring components are used to display one of the following:

• the length of time a process will take
• a visual percentage value (referred to as a determinate state)
• a visual representation of an unspecified wait time (referred to as an indeterminate state)

Progress components are typically visually represented by a circular or linear animation. When the value attribute is passed, the state is determinate; otherwise, it is indeterminate.

Use cases:

• Progress indicators
• Metric visualisation

Example

Genesis

Declaration

<rapid-progress-ring></rapid-progress-ring>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-progress-ring></rapid-progress-ring>
  `,
})
export class MyElement extends GenesisElement {
}

React

Declaration

  <rapid-progress-ring></rapid-progress-ring>

Usage

export function MyComponent() {
  return (
    <rapid-progress-ring></rapid-progress-ring>
  );
}

Angular

Declaration

  <rapid-progress-ring></rapid-progress-ring>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
      <rapid-progress-ring></rapid-progress-ring>
      `,
  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-ring value="75">
min	number	The minimum value of progress.	<rapid-progress-ring value="0">
max	number	The maximum value of progress.	<rapid-progress-ring max="100">

Properties

This component doesn't have any properties which are not also 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.