Forms: Progress - Launchpad

Basic progress

<div class="lp-progress" data-lp-component="progress" data-lp-value="35">
    <div class="lp-progress-bar" style="width:35%;"></div>
</div>

With label

60%

<div class="lp-progress" data-lp-component="progress" data-lp-value="60" data-lp-show-label="true">
    <div class="lp-progress-bar" style="width:60%;">60%</div>
</div>

Color variants

<div class="lp-d-flex lp-flex-column lp-gap-3">
    <div class="lp-progress">
        <div class="lp-progress-bar lp-bg-primary" style="width:70%;"></div>
    </div>
    <div class="lp-progress">
        <div class="lp-progress-bar lp-bg-success" style="width:50%;"></div>
    </div>
    <div class="lp-progress">
        <div class="lp-progress-bar lp-bg-warning" style="width:85%;"></div>
    </div>
    <div class="lp-progress">
        <div class="lp-progress-bar lp-bg-danger" style="width:25%;"></div>
    </div>
    <div class="lp-progress">
        <div class="lp-progress-bar lp-bg-info" style="width:45%;"></div>
    </div>
</div>

Programmatic control

40%

<div class="lp-d-flex lp-gap-2 lp-mb-3 lp-flex-wrap">
    <button type="button" class="lp-btn lp-btn-sm lp-btn-secondary" id="pg-minus">-10%</button>
    <button type="button" class="lp-btn lp-btn-sm lp-btn-secondary" id="pg-plus">+10%</button>
    <button type="button" class="lp-btn lp-btn-sm lp-btn-primary" id="pg-reset">Reset</button>
</div>
<div class="lp-progress" id="pg-api" data-lp-component="progress" data-lp-value="40" data-lp-show-label="true">
    <div class="lp-progress-bar" style="width:40%;">40%</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const el = document.getElementById("pg-api");
    const bar = el.querySelector(".lp-progress-bar");
    let value = 40;
    const update = () => {
        value = Math.max(0, Math.min(100, value));
        bar.style.width = value + "%";
        bar.textContent = value + "%";
    };
    document.getElementById("pg-minus").addEventListener("click", () => { value -= 10; update(); });
    document.getElementById("pg-plus").addEventListener("click", () => { value += 10; update(); });
    document.getElementById("pg-reset").addEventListener("click", () => { value = 0; update(); });
});
</script>

Events

Event	Fires when	`event.detail`
`lp:progress:change`	`setValue()` is called	`{ value, percent }`