Progress ring

A progress ring displays a circular indicator that an action is 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 circle until the action has been completed (referred to as an indeterminate state).

Alternatively, you can indicate progress using the progress component, which displays progress along a horizontal line.

Use cases:

• progress indicators
• metric visualisation

Example

The example below has two progress rings. The first has a value of 75 against a max of 100, so it indicates that the action is 75% percent complete. The second is indeterminate, so it simply shows the animated circle.

Genesis

Declaration

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

Usage

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

React

Declaration

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

Usage

export function MyComponent() {
  return (
    <rapid-progress-ring min="0" max="100" value="75"></rapid-progress-ring>
    <rapid-progress-ring min="0" max="100"></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 min="0" max="100" value="75"></rapid-progress-ring>
      <rapid-progress-ring min="0" max="100"></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

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.