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

Unfortunately, due to gecko-based browsers not supporting modern attr() usage, you have to use CSS variables for controlling the progress value.

<div is-="progress" style="--progress-value: 50;">50%</div>
<div is-="progress" style="--progress-value: 2; --progress-max: 5;">2/5</div>

To dynamically update the progress value with JavaScript:

document
    .getElementById('my-progress-element')
    .style.setProperty('--progress-max', '100')
document
    .getElementById('my-progress-element')
    .style.setProperty('--progress-value', '50')

Examples

Color

Text content

Hybrid

Reference

Properties

• --progress-value: The current progress value (defaults to 0). Typically this is dynamically set by JavaScript
• --progress-max: The maximum progress value (defaults to 100)
• --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: 50;
    --progress-max: 100;
    --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 {
    [is-~='progress'] {
        &[variant='yarn'] {
            --progress-value-content: '[#######################';
            --progress-empty-content: '.......................]';
        }

        &[variant='npm'] {
            --progress-value-content: '[████████████████████';
            --progress-empty-content: '░░░░░░░░░░░░░░░░░░░░]';
        }

        /* ... */
    }
}

Scope

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