SusProgressCircular

Circular progress — determinate value or indeterminate spin.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Value	Prop<float>	0f	v-model
Max	Prop<float>	100f	v-model
Indeterminate	Prop<bool>	false	v-model
Color	Prop<string>	"primary"	v-model
Size	Prop<string>	"md"	v-model
Width	Prop<float>	3f	v-model
Rotate	Prop<float>	-90f	v-model
RotationSpeed	Prop<float>	4f	v-model
LabelText	Prop<string>	""	v-model

Slots

Name
label

Events

No public events.

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-progress-circular
• sus-progress-circular__canvas
• sus-progress-circular__content
• sus-progress-circular__label
• sus-progress-circular--danger
• sus-progress-circular--indeterminate
• sus-progress-circular--lg
• sus-progress-circular--md
• sus-progress-circular--primary
• sus-progress-circular--secondary
• sus-progress-circular--sm
• sus-progress-circular--success
• sus-progress-circular--warning
• sus-progress-circular--white
• sus-progress-circular--xl
• sus-progress-circular--xs

Usage

<template>
  <sus:SusProgressCircular :Value="LoadPct.Value"
                           Max="100"
                           Color="primary"
                           Size="md"
                           LabelText="42%" />
</template>

<script>
public Prop<float> LoadPct = new(42f);
</script>

var ring = new SusProgressCircular();
ring.Indeterminate.Value = true;
ring.Color.Value = "primary";
ring.Size.Value = "lg";

Size

xs · sm · md · lg · xl

Notes

• Slot label replaces LabelText when you need custom center content.
• Width is stroke thickness; Rotate / RotationSpeed tune the indeterminate spin.