Rumah > Artikel > hujung hadapan web > 如何使用源生css3实现圆环加载进度条
这次给大家带来如何使用源生css3实现圆环加载进度条,使用源生css3实现圆环加载进度条的注意事项有哪些,下面就是实战案例,一起来看一下。
效果图:
当时的要求是让进度条以扇形渐变的效果加载。我想了半天,好像只有用border-img来做渐变图了,还有一个超笨的方法就是写50个长方形分布在进度条上。css3提供的渐变有线性渐变,径向渐变和重复渐变,想不出来怎样实现扇形渐变。不说了,上代码:
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ 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; } </style> <script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script> </head> <body> <p class="wrap"> <p class="circle"> <p class="percent left"></p> <p class="percent right wth0"></p> </p> <p class="num"><span>0</span>%</p> </p> </body> <script> 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); </script> </html>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci 如何使用源生css3实现圆环加载进度条. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!