话不多说,直接上代码:
css:
section{width:2rem;height:2rem;position: relative;margin:2rem;} .wrap,.circle,.percent{position: absolute; width: 2rem; height: 2rem; border-radius: 50%;} .wrap{top:0; left:0; background-color:#ccc;} .circle{box-sizing: border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; border:1px solid #ccc; clip:rect(0,2rem,2rem,1rem);} .clip-auto{clip:rect(auto, auto, auto, auto);} .percent{box-sizing: border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; top:-1px; left:-1px;} .left{border:0.1rem solid #ff6300; clip: rect(0,1rem,2rem,0);} .right{border:0.1rem solid #FF6300; clip: rect(0,2rem,2rem,1rem);} .wth0{width:0;} .num{position: absolute; box-sizing: border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; width:1.8rem; height:1.8rem; line-height:1.8rem; text-align: center; font-size: 0.5rem; left:0.1rem; top:0.1rem; border-radius: 50%; color:#FF6300; background: white; z-index: 1;}
html:
<!--进度0%--> <section> <div class="wrap"> <!--大于180,则class=clip-auto circle,否则:circle--> <div class="circle"> <!--度数为:当前进度*3.6--> <div class="percent left" style="-webkit-transform:rotate(0deg);"></div> <!--大于180,则class=percent right,否则为percent right wth0--> <div class='percent right wth0'></div> </div> <div class="num"> <span>0</span>% </div> </div> </section> <!--进度30%--> <section> <div class="wrap"> <!--大于180,则class=clip-auto circle,否则:circle--> <div class="circle"> <!--度数为:当前进度*3.6--> <div class="percent left" style="-webkit-transform:rotate(108deg);"></div> <!--大于180,则class=percent right,否则为percent right wth0--> <div class='percent right wth0'></div> </div> <div class="num"> <span>30</span>% </div> </div> </section> <!--进度50%--> <section> <div class="wrap"> <!--大于180,则class=clip-auto circle,否则:circle--> <div class="clip-auto circle"> <!--度数为:当前进度*3.6--> <div class="percent left" style="-webkit-transform:rotate(180deg);"></div> <!--大于180,则class=percent right,否则为percent right wth0--> <div class='percent right'></div> </div> <div class="num"> <span>50</span>% </div> </div> </section> <!--进度70%--> <section> <div class="wrap"> <!--大于180,则class=clip-auto circle,否则:circle--> <div class="clip-auto circle"> <!--度数为:当前进度*3.6--> <div class="percent left" style="-webkit-transform:rotate(252deg);"></div> <!--大于180,则class=percent right,否则为percent right wth0--> <div class='percent right'></div> </div> <div class="num"> <span>70</span>% </div> </div> </section> <!--进度100%--> <section> <div class="wrap"> <!--大于180,则class=clip-auto circle,否则:circle--> <div class="clip-auto circle"> <!--度数为:当前进度*3.6--> <div class="percent left" style="-webkit-transform:rotate(360deg);"></div> <!--大于180,则class=percent right,否则为percent right wth0--> <div class='percent right'></div> </div> <div class="num"> <span>100</span>% </div> </div> </section>
由于demo使用了rem,所以为了看到最好的效果,加上字体调节js
//自动设置font-zise (function (doc, win){ var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function(){ var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = parseInt(20 * (clientWidth / 320))+ 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc,false); doc.addEventListener('DOMContentLoaded',recalc,false); })(document, window);
结果: