css环形进度条clip,圆形进度条的实现纯css

如图

代码如下

{{ item.deg + 'deg' }}

export default {

data() {

return {

percentData: [{

number: '123213',

deg: 90,

},

{

number: '123213',

deg: 180,

},

{

number: '123213',

deg: 270,

},

{

number: '123213',

deg: 360,

}

]

}

},

created() {

},

methods: {

},

}

@import "../common/common";

/* 大圆 */

.wrap {

background-color: #ccc;

position: relative;

width: 1.5rem;

height: 1.5rem;

border-radius: 50%;

/* 绘制圆环*/

.circle {

box-sizing: border-box;

border: 1px solid #ccc;

clip: rect(0, 1.5rem, 1.5rem, 0.75rem); //默认不显示左侧的圆弧 小于180deg的时候

position: absolute;

width: 1.5rem;

height: 1.5rem;

border-radius: 50%;

.percent {

box-sizing: border-box;

top: -1px;

left: -1px;

position: absolute;

width: 1.5rem;

height: 1.5rem;

border-radius: 50%;

}

.left {

border: 12px solid #3C8CFF;

clip: rect(0, 0.75rem, 1.5rem, 0);

}

.right {

border: 12px solid #3C8CFF;

clip: rect(0, 1.5rem, 1.5rem, 0.75rem);

}

//该样式控制左侧的圆弧是否显示

.wth0 {

width: 0;

}

}

//该样式控制左侧的圆弧是否显示

.clip-auto {

clip: rect(auto, auto, auto, auto);

}

/* 内圈的小圆*/

.inside-round {

position: absolute;

width: 1.38rem;

height: 1.38rem;

background: #fff;

border-radius: 50%;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

text-align: center;

line-height: 1.38rem;

}

}

标签：1.5,clip,进度条,auto,圆形,rem,border,css,deg

来源： https://blog.csdn.net/Candy_mi/article/details/94855308