mljr-ui · showcase

Progress Ring

SVG circular progress indicator. Server-rendered with correct stroke-dashoffset.

primitive progress-ring
Controls
value
variant
size
Current props
value: ""
variant: ""
size: ""

Usage

primitive.ProgressRing(primitive.ProgressRingProps{
    Value:     72,
    Size:      80,
    Thickness: 8,
    Label:     "72%",
    Variant:   primitive.ProgressSuccess,
})

All combinations (60)

Enum controls only · bool and text use defaults

0 · 48
0%
0 · 72
0%
0 · 96
0%
0 · success · 48
0%
0 · success · 72
0%
0 · success · 96
0%
0 · warning · 48
0%
0 · warning · 72
0%
0 · warning · 96
0%
0 · danger · 48
0%
0 · danger · 72
0%
0 · danger · 96
0%
25 · 48
25%
25 · 72
25%
25 · 96
25%
25 · success · 48
25%
25 · success · 72
25%
25 · success · 96
25%
25 · warning · 48
25%
25 · warning · 72
25%
25 · warning · 96
25%
25 · danger · 48
25%
25 · danger · 72
25%
25 · danger · 96
25%
50 · 48
50%
50 · 72
50%
50 · 96
50%
50 · success · 48
50%
50 · success · 72
50%
50 · success · 96
50%
50 · warning · 48
50%
50 · warning · 72
50%
50 · warning · 96
50%
50 · danger · 48
50%
50 · danger · 72
50%
50 · danger · 96
50%
72 · 48
72%
72 · 72
72%
72 · 96
72%
72 · success · 48
72%
72 · success · 72
72%
72 · success · 96
72%
72 · warning · 48
72%
72 · warning · 72
72%
72 · warning · 96
72%
72 · danger · 48
72%
72 · danger · 72
72%
72 · danger · 96
72%
100 · 48
100%
100 · 72
100%
100 · 96
100%
100 · success · 48
100%
100 · success · 72
100%
100 · success · 96
100%
100 · warning · 48
100%
100 · warning · 72
100%
100 · warning · 96
100%
100 · danger · 48
100%
100 · danger · 72
100%
100 · danger · 96
100%

Props

NameTypeOptionsDefault
valueenum0, 25, 50, 72, 10072
variantenum, success, warning, danger
sizeenum48, 72, 9672