：
當時的要求是讓進度條以扇形漸層的效果載入。我想了半天，好像只有用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中文網其它相關文章！
推薦閱讀：
js基礎使用小結
JS中怎樣避免特性與瀏覽器推斷
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
