# Circle 圆圈

## 应用场景

圆圈组件一般用于显示进度，展示百分比数据。

## 示例

### 简单示例

\`\`\` vux components=Circle

 {{percent1}} \`\`\` ### 添加中间内容 > 通过默认slot支持 \`\`\` vux components=Circle {{percent2}}%

&#x20;export default { ready () { setInterval(this.update, 2000) }, data () { return { percent2: 30, strokeColor2: '#3FC7FA' } }, methods: { update: function () { const colorMap = \['#3FC7FA', '#85D262', '#FE8C6A'] this.percent2 = parseInt(Math.random() \<em> 100, 10) this.strokeColor2 = colorMap\</em>\<em>\[parseInt(Math.random() \</em> 3, 10)] } } }&#x20;

\`\`\`