Get help Color blind mode Low vision mode

Progress Ready

The progress component is used to indicate any process that is ongoing and time sensitive

The progress component is a simple indicator that takes a value from 0 to 100, accessibility is improved via labels - expected screenreader behaviour is to stay silent when progress=0, to say "x, in progress" when progress is < 99 and "x, completed" when progress = 100

Examples #

Open in new window 
<duet-layout center>
  <div slot="main">
    <duet-card padding="large">
      <br />
      <duet-progress height="5px" progress="0" id="testprogress" accessible-label="someFile.png"></duet-progress>
      <duet-spacer size="large"></duet-spacer>
      <duet-button id="startBn">start progress</duet-button>
    </duet-card>
  </div>
</duet-layout>

<script>
  const progressBar = document.getElementById("testprogress");
  const bn = document.getElementById("startBn");

  let progress = 0;
  function startProgress(){

    const interval = setInterval(() => {
      progress += Math.floor(Math.random() * 11);
      if(progress > 100){
        progress = 100;
        clearInterval(interval);
      }
      progressBar.progress = progress;
    },500);
  }

  bn.onclick=startProgress;
</script>
Open in new window 
<br/>
<duet-progress height="1px" progress="10"></duet-progress>
<br/>
<duet-progress height="5px" progress="20"></duet-progress>
<br/>
<duet-progress height="10px" progress="30"></duet-progress>
<br/>
<duet-progress height="15px" progress="40"></duet-progress>
<br/>
<duet-progress height="20px" progress="50"></duet-progress>

Properties #

Property Attribute Description Type Default
accessibleDescribedBy accessible-described-by Indicates the id of a component that describes the upload component. string undefined
accessibleDescription accessible-description Aria description the button string undefined
accessibleDetails accessible-details Aria Details of the component string undefined
accessibleLabel accessible-label Indicates the aria-label of the component - this will get combined with an label+uploading when uploading, and label+upload complete when upload is complete string undefined
accessibleLabelUpload accessible-label-upload Adds accessible label for upload in progress and upload complete states string getLocaleString(this.accessibleLabelUploadDefaults)
accessibleLabelUploadDefaults accessible-label-upload-defaults Defaults for accessibleLabel DuetLangObject | string { fi: ["lähetys valmis", "lähetys käynnissä"], sv: ["Uppladdningen är klar", "Uppladdning pågår"], en: ["upload completed", "upload in progress"], }
accessibleLabelledBy accessible-labelled-by String of id's that indicate alternative labels elements string undefined
caption caption Caption (underneath label) that can be set as a way of adding extra information string undefined
height height Height of progressbar string "10px"
progress progress Progress of the bar, a value from 0-100 number 0
theme theme Theme of the input. "" | "default" | "turva" ""

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.