效果展示
没掌握上传动图的操作，这里就先截静态图吧
25%
50%
实现思路
自己的思路
一开始看到这个图的时候，想着应该不难
- 外面一个
div，里面一个div，一个背景深蓝色，一个背景白色 - 蓝色的
div加一个伪元素，背景浅蓝色，再裁剪一半
还是先试试，写着写着发现中间各种设置四周边距，才让中间div居中，我都看不下去了
参考了别人的思路
看了有很多例子，一开始没看懂的时候，觉得都写的什么呀，有这么复杂吗，但不知道怎么就突然开了窍，哇，这么简单，原来都是套路呀。
CSS属性
更合理的思路
利用遮罩和裁剪的思想。
- 想象你有一个浅蓝色的圆圈，一个浅蓝色的半圆圈，一个深蓝色的半圆圈，三个半径一样大；
- 浅蓝色半圆圈，深蓝色半圆圈，浅蓝色圆圈，从上往下依次堆叠放置；
- 这时候，你会发现将中间那层深蓝色半圆圈稍作转动，从上忘下俯视，就会发现有你要的效果；
-
HTML设计如下
HTML结构 -
最外层
div设置宽度为10px的border，让里面内容居中
设置大小和内容居中 -
给内层第一个
div（深蓝色半圆圈）设置border，裁剪右半部分，并让其顺时针旋转90°
-
给外层
div设置两个伪元素，分别是after（浅蓝色半圆圈）和before（浅蓝色圆圈）
before
after裁剪右半部分
让它动起来
设置从0°开始顺时针旋转90°
利用animation一些属性
这样，一个动态的圆环就成功啦。
