这次给大家带来如何使用源生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);
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
进度条
进度条
以上就是如何使用源生css3实现圆环加载进度条的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2897511.html
