首先看下效果图:
主要涉及的css的clip,以及transform旋转使用。不废话,直接来代码。(基于jq)
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:include="base/base::head('进度条测试页面',~{::link},~{::script},~{::style})"> <style type="text/css"> /* 背景色:#00ab51 */ .pro-panel{ position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; } .pro-panel .pro-tran{ width: 100px; height: 100px; position: absolute; background-color: #00ab51; border-radius: 50%; } .pro-panel .pro-tran .pro-circle-left,.pro-panel .pro-tran .pro-circle-right{ width: 100px; height: 100px; background-color: white; border-radius: 50%; position: absolute; } .pro-panel .pro-tran .pro-circle-left{ clip: rect(0,50px,100px,0); } .pro-panel .pro-tran .pro-circle-right{ clip: rect(0, 100px,100px,50px); } .pro-panel .pro-text,.pro-panel .pro-inter{ width: 75px; height: 75px; position: absolute; border-radius: 50%; background-color:#00ab51; text-align: center; line-height: 75px; } .pro-panel .pro-inter{ width: 85px; height: 85px; background-color: white; } </style> <script type="text/javascript"> function rotateTran(percent){ var percent = percent; if (percent <= 50){ $('.pro-circle-right').css('transform','rotate('+(percent*3.6)+'deg)'); }else { $('.pro-circle-right').css({ 'transform':'rotate(0)', 'background-color':'#00ab51' }); $('.pro-circle-left').css('transform','rotate('+((percent-50)*3.6)+'deg)'); if(percent == 100){ $('.pro-circle-right,.pro-circle-left').css('background-color','#00ab51'); } } $(".pro-text").text(percent+"%"); } $(function () { var percent = 0; var mytarget = setInterval(function () { if (percent == 100){ clearInterval(mytarget); } rotateTran(percent); percent += 5; },500); }) </script> </head> <body> <div class="pro-panel"> <div class="pro-tran"> <div class="pro-circle-left"></div> <div class="pro-circle-right"></div> </div> <div class="pro-inter"></div> <div class="pro-text">1%</div> </div> </body> </html>