纯css实现圆环进度加载及数值变动
CSS 计数函数(counter)
counter计算函数 返回一个代表计数器当前值的字符串。接收两个参数，一个名称，一个计数样式。 counter(name,styleName),name 区分大小写，作为代表当前计数器的名称标识。 styleName 参数是可选的，代表递增数字或者字母的种类，可接受的参数为 list-style-type 所支持的种类。常用的有以下这些:
disc （实心圆点）
circle （空心圆点）
square （实心方块）
decimal （阿拉伯数字 12345...）
lower-roman（罗马数字 i, ii, iii...）
upper-roman (罗马数字 I, II, III, IV...)
simp-chinese-informal (中文计数 一、二、三、....九十九、)
simp-chinese-formal （中文繁体 壹贰叁肆伍...）
lower-latin (小写字母 abcd...)
upper-latin (大写字母 ABCD....)
counter-increment
利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。 注释：如果使用了 "display: none"，则无法增加计数。如使用 "visibility: hidden"，则可增加计数。
html 部分
<template>
<div class="container">
<div class="loading"></div>
</div>
</template>
css 部分
$color: #e91e63
.container
position: relative
overflow: hidden
width: 124px
height: 124px
overflow: hidden
margin: 100px auto
border-radius: 50%
background: black
.loading
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
width: 120px
height: 120px
line-height: 120px
border-radius: 50%
color: #fff
font-size: 20px
cursor: pointer
box-shadow: 60px -60px 0 2px $color, -60px -60px 0 2px $color,-60px 60px 0 2px $color, 60px 60px 0 2px $color
text-align: center
// 定义字符
counter-increment: scale 0
&:hover
animation: shadow .5s ease forwards
&::before
// 取值scalecounter-increment中后面的值
content: counter(scale,decimal)'%'
display: inline-block
@keyframes shadow
0%
box-shadow: 60px -60px 0 2px $color, -60px -60px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px transparent
counter-increment: scale 0
25%
box-shadow: 0 -125px 0 2px $color, -60px -60px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff
counter-increment: scale 25
50%
box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff
counter-increment: scale 50
75%
box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, 0px 125px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff
counter-increment: scale 75
100%
box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, 0px 125px 0 2px $color, 120px 40px 0 2px $color, 0 0 0 2px #fff
counter-increment: scale 100
