Circle

Circular progress ring, commonly used to show completion.

Code examples

75%45%

Circular progress

Custom colors, size, and slot content

<m-circle percent="75" size="100" stroke-width="6">
  <span>75%</span>
</m-circle>

<m-circle percent="100" color="#10B981" size="80" stroke-width="5">
  <m-icon type="success" size="24" color="#10B981" />
</m-circle>

<m-circle percent="45" color="#F59E0B" layer-color="#FEF3C7" size="80">
  <span>45%</span>
</m-circle>

API

Props

属性	说明	类型	默认值
percent	Percentage	number	0
size	Ring size (px)	number	100
color	Progress color	string	-
layer-color	Track color	string	-
stroke-width	Stroke width	number	4
clockwise	Whether to draw clockwise	boolean	true