vue 圆形百分比进度条_纯CSS3实现圆弧(圆圈)百分比动画进度条

来自国外的一个牛人写的代码，根据CSS3的clip、transform和animation来实现的效果，所以你需要很清楚的知道这些属性是具有哪些作用的才能明白他这个CSS的原理。

首先定义基本样式：

.wrapper {

width: 100px; /* Set the size of the progress bar */

height: 100px;

position: absolute; /* Enable clipping */

clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */

}

/* Set the sizes of the elements that make up the progress bar */

.circle {

width: 80px;

height: 80px;

border: 10px solid green;

border-radius: 50px;

position: absolute;

clip: rect(0px, 50px, 100px, 0px);

}

接着是动画规则

/* Using the data attributes for the animation selectors. */

/* Base settings for all animated elements */

div[data-anim~=base] {

-webkit-animation-iteration-count: 1; /*