Progress Ring

The <velin-progress-ring> web component renders a circular SVG progress indicator with configurable value, size, color, and optional centre label.

Basic ring

<velin-progress-ring value="25"></velin-progress-ring>
<velin-progress-ring value="50"></velin-progress-ring>
<velin-progress-ring value="75"></velin-progress-ring>

Size

Set the size attribute (in pixels) to scale the ring.

<velin-progress-ring value="60" size="48"></velin-progress-ring>
<velin-progress-ring value="60" size="80"></velin-progress-ring>
<velin-progress-ring value="60" size="120"></velin-progress-ring>

Color

Use the color attribute with any CSS colour value or semantic name.

<velin-progress-ring value="80" color="success"></velin-progress-ring>
<velin-progress-ring value="40" color="warning"></velin-progress-ring>
<velin-progress-ring value="90" color="#e91e63"></velin-progress-ring>

Label

Add label to show the percentage in the centre. Use label="custom" with slotted content for custom text.

<velin-progress-ring value="72" label></velin-progress-ring>
<velin-progress-ring value="100" color="success" label></velin-progress-ring>