我知道的环形的画法是这样的:
背景圆形,颜色是背景色。
前景1是亮色,形状是一个半圆。
前景2是亮色,形状也是一个半圆。
前景3是背景色,形状是半圆。
表现百分比的时候是这样:
0%的时候,不显示亮色,所以都是灰色。
0%~50%的时候,让前景3开始旋转,让前景1和2中的一个不显示(取决于你准备向左旋转还是向右),这样前景1和前景3的角度差就是进度条。
50%~100%的时候,让前景1完全显示,让前景3继续旋转和前景2的角度差成为进度条。
所以这三个前景的位置关系是 前景3〉前景2〉前景1〉背景。
http://www.zhangxinxu.com/wordpress/2014/04/css3-pie-loading-waiting-animation/ 这是张鑫旭的文章,讲的也蛮有意思。
至于做一个环形就不用说了吧……
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。