Circle

Circular progress bar component, supporting color customization, gradient colors, direction control and slot content.

Component Type

Basic Usage

Bind current progress through v-model, control center text through text.

<wd-circle v-model="current" :text="`${current}%`" />

Component Style

Width Control

Control progress bar width through stroke-width.

<wd-circle v-model="current" :stroke-width="6" />

Color Customization

Control progress bar color through color, control track color through layer-color.

<wd-circle v-model="current" color="#ee0a24" layer-color="#eee" />

Gradient Color

color supports object format to define gradient colors.

<wd-circle v-model="current" :color="gradientColor" />

const gradientColor = {
  '0': 'red',
  '100': 'white'
}

Counter-clockwise Direction

Set clockwise to false, progress expands from counter-clockwise direction.

<wd-circle v-model="current" :clockwise="false" />

Size Customization

Control circle diameter through size.

<wd-circle v-model="current" :size="120" />

Content Form

Use Default Slot

When text is not passed, default slot can be used to customize center content.

<wd-circle v-model="current" :stroke-width="6">
  <view style="color: red">{{ current }}%</view>
</wd-circle>

Special Style

Progress Control

<wd-button type="primary" size="small" @click="doAdd">Increase</wd-button>
<wd-button type="danger" size="small" @click="doDecre">Decrease</wd-button>

Attributes

Parameter	Description	Type	Default Value
v-model	Current progress	number	0
size	Circle diameter, unit px	number	120
color	Progress bar color, supports string or gradient object	string | Record<string, string>	#1C64FD
layer-color	Track color	string	#F2F3F5
fill	Fill color	string	-
speed	Animation speed, unit rate/s	number	50
text	Circle center text	string	-
stroke-width	Progress bar width, unit px	number	18
stroke-linecap	Endpoint shape, optional values are butt, round, square	string	round
clockwise	Whether to increase clockwise	boolean	true
custom-class	Root node custom class name	string	''
custom-style	Root node custom style	string	''

Slots

name	Description	Parameters
default	Custom circle center content (only displayed when text is empty)	-

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-circle-text-color	currentColor	圆环文字颜色
--wot-circle-text-size	$typography-title-size-large	圆环文字字号
--wot-circle-text-line-height	$typography-title-line--height-size-large	圆环文字行高

Source Code

Documentation

• Component