Radial progress<mds-radial-progress>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
typographyenumThe typography of the component
variantenumSets the theme variant colors
iconstringSpecifies if the component should display an icon
progressnumberA value between 0 and 1 that rapresents the status progress
Overview
The <mds-radial-progress> web component renders a circular progress indicator that visualizes a completion ratio as a ring with a numeric percentage at its center. It is the radial counterpart of the linear bar exposed by <mds-progress>, which composes it internally, and it has no native HTML primitive equivalent.
Semantic Behavior
Progress semantics: Exposed to assistive technology as a progress widget.Value clamping: progress is interpreted as a 0 - 1 ratio and clamped to that range, so out-of-bounds values never overflow the ring or the displayed percentage.Centered readout: The clamped ratio is shown as a whole-number percentage at the ring’s center.Animated fill: Changing progress at runtime animates the ring toward the new value (~500ms).Reduced motion: When reduced motion is in effect (the Magma animation preference set to reduce, or the OS prefers-reduced-motion: reduce while the preference follows the system), the ring jumps directly to the target value with no tween.Icon prop: Setting icon renders an icon above the percentage; the component has no slots.
Properties & Visual Configurations
progress is the single source of truth for the indicator, expressed as a fraction between 0 and 1 (e.g. 0.42 shows “42”). It is the value to bind for live updates.The shared variant ladder is defined in agents/variants.md. On this component variant selects the ring color and is the only way to express status: pick a brand value ('primary', 'ai') for neutral progress, or a status value ('success', 'warning', 'error', 'info') to color the completion state. There is no separate tone prop.
Other behavioral props
icon is an SVG filename slug from the Magma icon library; when present it is shown alongside the centered percentage rather than replacing it.typography controls the type token of the centered percentage text, restricted to the technical scale ('option' by default, or 'label') so the readout stays sized for the ring.