Progress

Displays a progress bar

Note: The progress bar component automatically rounds the progress display value to the nearest character width

Import

@import '@webtui/css/components/progress.css';

Usage

<progress value="50" max="100">50%</progress>
<progress value="25" max="50">20/50</progress>
<div is-="progress" value="2" max="5">2/5</div>

Examples

Color

Text content

Hybrid

Reference

Properties

• --progress-value-background: The background color of the progress value bar
• --progress-value-color: The text color of the progress value bar
• --progress-value-content: The text content of the progress value bar
• --progress-empty-background: The background color of the remaining empty space in the progress bar
• --progress-empty-color: The text color of the remaining empty space in the progress bar
• --progress-empty-content: The text content of the remaining empty space in the progress bar

Important: Since CSS doesn’t have a way to arbitrarily repeat text a number of times, you will have to repeat a character an arbitrary amount of times for --progress-value-content or --progress-empty-content

progress {
    --progress-value-background: var(--background2);
    --progress-value-color: var(--foreground0);
    --progress-value-content: '[#######################';
    --progress-empty-background: var(--background1);
    --progress-empty-color: var(--foreground0);
    --progress-empty-content: '.......................]';
}

Extending

To extend the Progress stylesheet, define a CSS rule on the components layer

@layer components {
    progress,
    [is-~='progress'] {
        &[variant='green'] {
            /* ... */
        }

        /* ... */
    }
}

Scope

[is-~='progress'] {
    /* ... */
}