小编Den*_*los的帖子

如何在进度圆的末端绘制一个小圆圈,并在其下方/上方添加一个小文本块？

示例img:

<div class="radial-progress" data-progress="0">
    <div class="circle">
    <div class="img"></div>
        <div class="mask full">
            <div class="fill"></div>
        </div>
        <div class="mask half">
            <div class="fill"></div>
            <div class="fill fix"></div>
        </div>
        <div class="shadow"></div>
    </div>
    <div class="inset">
        <div class="percentage">
            <div class="numbers"><span>-</span><span>0%</span><span>1%</span> <!--- lots of spans --->
        </div>
    </div>
</div>

感谢Andre的medium.com文章,我已经编辑了他的版本 - 一个UPDATED版本说明了我想要为给定的%值动态实现的内容:http://codepen.io/Inlesco/pen/pgKXeG

但是,编译的CSS太多了.对于每百分之一的百分比,定位的东西会有太多的CSS.当前的CSS(@codepen示例)已经加权~50 KB.不是最好的做法.

我已经在基于JS Canvas的变体上做了一些进展,将vert&horz居中img定位在画布上方.但对于一个好看的响应式网站来说,它真的是唯一的方法和最佳实践吗？