• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Default
  2. With custom min and max values
  3. Overflow
  4. Steps
  5. Pending
  6. On brand color
  7. Properties
Components Progress
(external link)

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-labeledby="progress-label" aria-valuenow="25"></ld-progress>
<span class="ld-sr-only" id="progress-label-css">Progress</span>
<div class="ld-progress"
aria-labeledby="progress-label-css"
aria-valuenow="25"
role="progressbar"
style="--ld-progress-valuenow: 25">
</div>
<LdSrOnly id="progress-label">Progress</LdSrOnly>
<LdProgress aria-labeledby="progress-label" aria-valuenow={25} />
Progress
Progress

Interactive example:

<ld-sr-only id="progress-label">Progress</ld-sr-only>
<ld-progress aria-labeledby="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-labeledby="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-labeledby="progress-label"
aria-valuenow={25}
ref={progressRef}
/>


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

/>

</>
)
Progress
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