Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Progress

Usage notes

Progress bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.

Default

Toggle markup


        <coral-progress value="65"></coral-progress>

Small

Toggle markup


        <coral-progress value="65" size="S"></coral-progress>

With label

Toggle markup


        <coral-progress value="65">Loading</coral-progress>

With percent

65%

Toggle markup


        <coral-progress value="65" showpercent=""></coral-progress>

With label + percent

65%

Laden ihrer Creative Cloud dateien

Toggle markup


        <coral-progress value="65" showpercent="">Laden ihrer Creative Cloud dateien</coral-progress>

With side positioned label

Toggle markup


        <coral-progress value="65" labelposition="side">Loading</coral-progress>

With side positioned label + percent

65%

Toggle markup


        <coral-progress value="65" labelposition="side" showpercent="">Loading</coral-progress>

With label content zone

This is my progress

Toggle markup


        <coral-progress value="22">
          <coral-progress-label>This is my progress</coral-progress-label>
        </coral-progress>

Indeterminate

Toggle markup


        <coral-progress indeterminate=""></coral-progress>