The <luna-progress-circle> component displays circular progress indicators.
Paths
/lunadom/components/progress-circle/progress-circle.js REQUIRED
Basic Usage
Custom Size and Color
Different Sizes
Pending/Indeterminate
Without Label
Custom Stroke Width
Customization
Attributes
value - Current value of the progress indicator
max - Maximum value (default: 100)
pending - Show indeterminate spinning state
label - Label displayed below the circle
show-value - Display percentage text in center
CSS Variables
--luna-progress-size - Diameter of the progress circle
--luna-progress-track - Color of incomplete track
--luna-progress-fill - Color of filled portion
--luna-progress-width - Thickness of circle stroke
--luna-progress-text - Color of value text in center
Example Code
<!-- Basic circular progress -->
<luna-progress-circle
label="Storage Used"
value="65"
show-value
></luna-progress-circle>
<!-- Custom size and color -->
<luna-progress-circle
label="Upload Progress"
value="85"
show-value
style="
--luna-progress-size: 100px;
--luna-progress-fill: #22c55e;
--luna-progress-width: 10;
"
></luna-progress-circle>
<!-- Pending/Indeterminate state -->
<luna-progress-circle
label="Loading..."
pending
style="--luna-progress-fill: #3b82f6;"
></luna-progress-circle>
<!-- Without label -->
<luna-progress-circle
value="75"
show-value
></luna-progress-circle>
<!-- Different sizes -->
<luna-progress-circle
value="50"
show-value
style="--luna-progress-size: 60px;"
></luna-progress-circle>
<luna-progress-circle
value="50"
show-value
style="--luna-progress-size: 120px;"
></luna-progress-circle>
<!-- Custom stroke width -->
<luna-progress-circle
value="70"
show-value
style="--luna-progress-width: 4;"
></luna-progress-circle>
<luna-progress-circle
value="70"
show-value
style="--luna-progress-width: 12;"
></luna-progress-circle>