Progress

A progress bar for showing completion of a task or process. Supports determinate values (0–100), color variants, three sizes, and an indeterminate animation for unknown durations.

Playground

Controls

Value

Variant

Size

Label

Max

Value Text

Indeterminate

Theme

HTMLReact

ShareCopy

Usage

<!-- Determinate -->
<lt-progress value="40"></lt-progress>
<lt-progress value="75" variant="success"></lt-progress>
<lt-progress value="60" variant="warning"></lt-progress>
<lt-progress value="30" variant="error"></lt-progress>

<!-- Sizes -->

<lt-progress value="50" size="sm"></lt-progress>
<lt-progress value="50" size="md"></lt-progress>
<lt-progress value="50" size="lg"></lt-progress>

<!-- Indeterminate -->

<lt-progress indeterminate></lt-progress>

import { Progress } from '@latty-ds/react';

<Progress value={40} />
<Progress value={75} variant="success" />
<Progress indeterminate />

<template>
<lt-progress :value="40"></lt-progress>
<lt-progress :value="75" variant="success"></lt-progress>
<lt-progress indeterminate></lt-progress>
</template>

API