OLYSENSE Design System

Progress rings are used to show the progress of a determinate operation in a circular fashion.

<ods-progress-ring value="25"></ods-progress-ring>

Use the —size custom property to set the diameter of the progress ring.

<ods-progress-ring value="25" class="sense-progress-ring-size-demo"></ods-progress-ring>

<style>
  .sense-progress-ring-size-demo {
    --size: 200px;
  }
</style>

import { OdsProgressRing } from '@ods/components/react.progress-ring';

const css = `
  /* Only used for documentation */
  .sense-progress-ring-size-demo {
    --size: 200px;
  }
`;

const Example = () => {
  return (
    <>
      <OdsProgressRing value={25} className="sense-progress-ring-size-demo"></OdsProgressRing>

      <style>{css}</style>
    </>
  )
}

export default Example;

Use the label attribute to label the progress bar and tell assistive devices how to announce it.

<ods-progress-ring value="50" label="Upload progress"></ods-progress-ring>

import { OdsProgressRing } from '@ods/components/react.progress-ring';

const Example = () => {
  return (
    <OdsProgressRing value={50} label="Upload progress"></OdsProgressRing>
  )
}

export default Example;

Use the default slot to show a value.

50%

<ods-progress-ring class="progress-ring-values" value="50">50%</ods-progress-ring>

<br />

<ods-icon-button name="minus" label="Decrease" class="sense-progress-button-one"></ods-icon-button>
<ods-icon-button name="plus" label="Increase" class="sense-progress-button-one"></ods-icon-button>

<script>
  const progressRingTwo = document.querySelector('.progress-ring-values');
  const subtractButtonTwo = progressRingTwo.nextElementSibling.nextElementSibling;
  const addButtonTwo = subtractButtonTwo.nextElementSibling;

  addButtonTwo.addEventListener('click', () => {
    const value = Math.min(100, progressRingTwo.value + 10);
    progressRingTwo.value = value;
    progressRingTwo.textContent = `${value}%`;
  });

  subtractButtonTwo.addEventListener('click', () => {
    const value = Math.max(0, progressRingTwo.value - 10);
    progressRingTwo.value = value;
    progressRingTwo.textContent = `${value}%`;
  });
</script>

<style>
  .sense-progress-button-one {
    margin-top: 1rem;
    margin-right: 0.2rem;
  }
</style>

import { useState } from 'react';
import { OdsProgressRing } from '@ods/components/react.progress-ring';
import { OdsIconButton } from '@ods/components/react.icon-button';

const css = `
  /* Only used for documentation */
  .ods-progress-button {
    margin-right: 0.5rem;
  }
`;

const Example = () => {
  const [value, setValue] = useState(50);

  function adjustValue(amount: any) {
    let newValue = value + amount;
    if (newValue < 0) newValue = 0;
    if (newValue > 100) newValue = 100;
    setValue(newValue);
  }

  return (
    <>
      <OdsProgressRing value={value}>{value}%</OdsProgressRing>

      <br /><br />

      <OdsIconButton className='ods-progress-button' name='minus' variant='secondary' label='Decrease' onClick={() => adjustValue(-10)}>Secondary</OdsIconButton>
      <OdsIconButton className='ods-progress-button' name='plus' variant='secondary' label='Increase' onClick={() => adjustValue(10)}>Secondary</OdsIconButton>

      <style>{css}</style>
    </>
  );
}

export default Example;

Importing

import '@ods/components/web.progress-ring';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	A label to show inside the ring.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Reflects	Type	Default
value		number	0
label		string	''

Parts

Name	Description
base	The component's base wrapper.
label	The progress ring label.

Progress Ring

Examples

Basic

Size

Accessible Label

Showing Values

Importing

Slots

Properties

Parts