ld-progress #

The ld-progress component can be used to displays the progress status for tasks that take a long time.

Default #

<ld-sr-only id="progress-label">Progress</ld-sr-only>
<ld-progress aria-labelledby="progress-label" aria-valuenow="25"></ld-progress>

<span class="ld-sr-only" id="progress-label-css">Progress</span>
<div class="ld-progress"
     aria-labelledby="progress-label-css"
     aria-valuenow="25"
     role="progressbar"
     style="--ld-progress-valuenow: 25"></div>

<LdSrOnly id="progress-label">Progress</LdSrOnly>
<LdProgress aria-labelledby="progress-label" aria-valuenow={25} />

Progress

Interactive example:

<ld-sr-only id="progress-label">Progress</ld-sr-only>
<ld-progress aria-labelledby="progress-label" aria-valuenow="25"></ld-progress>

<ld-slider value="25" max="200" width="14rem"></ld-slider>

<script>
  void function() {
    const slider = document.currentScript.previousElementSibling
    const progress = slider.previousElementSibling

    slider.addEventListener('ldchange', ev => {
      progress.ariaValuenow = ev.detail[0]
    })
  }()
</script>

<span class="ld-sr-only" id="progress-label-css">Progress</span>
<div class="ld-progress"
     aria-labelledby="progress-label-css"
     aria-valuenow="25"
     role="progressbar"
     style="--ld-progress-valuenow: 25"></div>

<ld-slider value="25" max="200" width="14rem"></ld-slider>

<script>
  void function() {
    const slider = document.currentScript.previousElementSibling
    const progress = slider.previousElementSibling
    slider.addEventListener('ldchange', ev => {
      const val = ev.detail[0]
      progress.ariaValuenow = val
      progress.style.setProperty('--ld-progress-valuenow', val)
    })
  }()
</script>

const progressRef = useRef(null)

return (
  <>
    <LdSrOnly id="progress-label">Progress</LdSrOnly>
    <LdProgress
      aria-labelledby="progress-label"
      aria-valuenow={25}
      ref={progressRef}
     />

    <LdSlider
      value="25"
      max={200}
      width="14rem"
      onLdchange={(ev) => {
        progressRef.current.ariaValuenow = ev.detail[0]
      }}
    />
  </>
)

Progress

With custom min and max values #

<ld-progress aria-valuemax="300"
             aria-valuemin="100"
             aria-valuenow="150"></ld-progress>

<div class="ld-progress"
     aria-valuemax="300"
     aria-valuemin="100"
     aria-valuenow="150"
     role="progressbar"
     style="--ld-progress-valuemax: 300; --ld-progress-valuemin: 100; --ld-progress-valuenow: 150"></div>

<LdProgress aria-valuemax={300}
            aria-valuemin={100}
            aria-valuenow={150} />

Overflow #

The component can visualize an overflow value up to 200% of the maximum progress value.

<ld-progress aria-valuenow="125"></ld-progress>
<ld-progress aria-valuenow="225"></ld-progress>

<div class="ld-progress"
     aria-valuenow="125"
     role="progressbar"
     style="--ld-progress-valuenow: 125"></div>
<div class="ld-progress"
     aria-valuenow="225"
     role="progressbar"
     style="--ld-progress-valuenow: 225"></div>

<LdProgress aria-valuenow={125} />
<LdProgress aria-valuenow={225} />

Steps #

<ld-progress aria-valuemax="4" aria-valuenow="1" steps></ld-progress>

<div class="ld-progress ld-progress--steps"
     aria-valuemax="4"
     aria-valuenow="1"
     role="progressbar"
     style="--ld-progress-valuemax: 4; --ld-progress-valuenow: 1"></div>

<LdProgress aria-valuemax={4} aria-valuenow={1} steps />

Pending #

<ld-progress pending aria-valuetext="indeterminate"></ld-progress>
<ld-progress pending aria-valuenow="25"></ld-progress>

<div class="ld-progress ld-progress--pending"
     aria-valuetext="indeterminate"
     role="progressbar"
     style="--ld-progress-valuenow: 100"></div>
<div class="ld-progress ld-progress--pending"
     aria-valuenow="25"
     role="progressbar"
     style="--ld-progress-valuenow: 25"></div>

<LdProgress pending aria-valuetext="indeterminate" />
<LdProgress pending aria-valuenow={25} />

On brand color #

Use this mode on backgrounds with brand color.

<ld-progress brand-color aria-valuenow="25"></ld-progress>

<div class="ld-progress ld-progress--brand-color"
     aria-valuenow="25"
     role="progressbar"
     style="--ld-progress-valuenow: 25"></div>

<LdProgress brandColor aria-valuenow={25} />

Properties #

Property	Attribute	Description	Type	Default
`ariaLabeledby`	`aria-labeledby`	Defines the string value or identifies the element (or elements) that label the progressbar element providing an accessible name.	`string`	`undefined`
`ariaValuemax`	`aria-valuemax`	Set to a decimal value representing the maximum value, and greater than aria-valuemin. If not present, the default value is 100.	`number`	`100`
`ariaValuemin`	`aria-valuemin`	Set to a decimal value representing the minimum value, and less than aria-valuemax. If not present, the default value is 0.	`number`	`0`
`ariaValuenow`	`aria-valuenow`	Only present and required if the value is not indeterminate. Set to a decimal value between 0, or valuemin if present, and aria-valuemax indicating the current value of the progress bar.	`number`	`undefined`
`ariaValuetext`	`aria-valuetext`	Assistive technologies often present the value of aria-valuenow as a percentage. If this would not be accurate use this property to make the progress bar value understandable.	`string`	`undefined`
`brandColor`	`brand-color`	Styles the progress bar in a way that it looks good on the primary color of the current theme.	`boolean`	`undefined`
`key`	`key`	for tracking the node's identity when working with lists	`string \| number`	`undefined`
`pending`	`pending`	Used to show indeterminate or pending progress state.	`boolean`	`undefined`
`ref`	`ref`	reference to component	`any`	`undefined`
`steps`	`steps`	Devides progress bar in multiple progress steps.	`boolean`	`undefined`

Built with StencilJS