需求ui图
实现：
个中紧张的html内容如下赤色方框loading所示
紧张是分旁边2部分，先将left设置成左半圆，right设置成右半圆，个中旁边宽高同等，宽是高的一半，如下图的灰色（left）/深灰色（right）所示，同时，将content设置成比left+right的圆小一点。不知道怎么去设置半圆或圆的，下面有参考的，相信大部分看着还是一下子就能实现这一步的。
根本图
根本css
初版效果图
上面的效果出来了，个中到时候旁边的颜色要设置一样，我上面是为了区分，才设置了2中颜色。步骤进行到这里了，差不多完成了一半，接下来便是设置百分比了,现在便是left/right下的after元素没有先容了，这里以left为例，right类似，可以点击上面的代码。
左边left+after
上面的效果图，个中赤色的是after相对left的右中央，偏移了20deg的半圆效果，是把left下的样式“overflow:hidden”去掉的，如果保留"overflow:hidden"，赤色区域是扇形，只是像见告你，它是用另一个半圆相对付圆形旋转的。你会创造它所有的旋转效果，都在left+right圆里面进行的，如果用content的圆来添补，就会有百分比的效果了
overflow:hidden去掉后的百分比效果
overflow:hidden保留的百分比效果
理论效果是overflow:hidden的效果，也便是说百分比的效果是左边+右边，左边的after的只在左半圆里实现百分比效果，右边类似，两个合并一起就能实现整体的百分比环形图啦。相信看到这里的同学们该当对怎么实现百分比环形图效果有了一定的印象，自己在动动手加深下印象哦总结：百分比环形图的实现实在并不难，第一步是实现环形图，通过旁边半圆实现大圆，用一个小圆和大圆同中央，直接覆盖上去，环形图就实现了。第二步是百分比的效果，在大圆和小圆中间层，旁边分别用半圆（圆形重叠）进行旋转
