这次给大家带来如何使用源生css3实现圆环加载进度条，使用源生css3实现圆环加载进度条的注意事项有哪些，下面就是实战案例，一起来看一下。
效果图：
当时的要求是让进度条以扇形渐变的效果加载。我想了半天，好像只有用border-img来做渐变图了，还有一个超笨的方法就是写50个长方形分布在进度条上。css3提供的渐变有线性渐变，径向渐变和重复渐变，想不出来怎样实现扇形渐变。不说了，上代码：
Document *{margin: 0;padding: 0;}.wrap,.circle,.percent{position: absolute;width: 200px;height: 200px;border-radius: 50%;}.wrap{top:50px;left:50px;background-color: #ccc;}.circle{box-sizing: border-box;border:20px solid #ccc;clip:rect(0,200px,200px,100px);}.clip-auto{clip:rect(auto, auto, auto, auto);}.percent{box-sizing: border-box;top:-20px;left:-20px;}.left{transition:transform ease;border:20px solid blue;clip: rect(0,100px,200px,0);}.right{border:20px solid blue;clip: rect(0,200px,200px,100px);}.wth0{width:0;}.num{position: absolute;box-sizing: border-box;width: 160px;height: 160px;line-height: 160px;text-align: center;font-size: 40px;left: 20px;top: 20px;border-radius: 50%;background-color: #fff;z-index: 1;}0%
var percent=0;var loading=setInterval(function(){if(percent>100){percent=0;$('.circle').removeClass('clip-auto');$('.right').addClass('wth0');}else if(percent>50){$('.circle').addClass('clip-auto');$('.right').removeClass('wth0');}$('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");$('.num>span').text(percent);percent++;},200);
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
js基础使用小结
JS中怎样避免特性与浏览器推断
以上就是如何使用源生css3实现圆环加载进度条的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609954.html
微信扫一扫 
支付宝扫一扫 
