Progress — lunaDOM Docs

The <luna-progress> component displays linear progress bars.

Paths

/lunadom/components/progress/progress.js

REQUIRED

Progress Bar

Pending Progress

Customization

Attributes
label - Label text for the progress
value - Progress value (0-100)
max - Maximum value of the progress bar (default: 100)
pending - Show indeterminate/pending state
show-value - Display the percentage value

CSS Variables
--luna-progress-height - Progress bar height
--luna-progress-bg - Progress background color
--luna-progress-fill - Progress fill color
--luna-progress-text - Color of the value text inside the bar
--luna-progress-radius - Border radius of the track and bar

Example Code

<luna-progress label="File Upload" value="80" show-value style="--luna-progress-height: 12px;" > </luna-progress>  <luna-progress label="Processing..." pending style="--luna-progress-fill: #3b82f6;" > </luna-progress>