效果
原理
最高效的實(shí)現(xiàn)方法當(dāng)然是用CSS3中的SVG繪制Path，但是我們也可以用最基礎(chǔ)的元素和樣式構(gòu)建出這種效果离斩。
我們把整個(gè)圓弧分成兩個(gè)半圓left-circle和right-circle，分別包含在兩個(gè)容器中right-wrapper和left-wrapper瘪匿，容器都設(shè)置了overflow:hidden跛梗，比如下圖中右側(cè)圓弧left-circle包含在左側(cè)容器right-wrapper中，但是初始狀態(tài)我們是看不到left-circle棋弥。
但隨著進(jìn)度遞增核偿，left-circle順時(shí)針旋轉(zhuǎn)進(jìn)入right-wrapper的可見(jiàn)區(qū)域，此時(shí)我們才能看得到進(jìn)度條的出現(xiàn)顽染。
最終再結(jié)合right-circle和left-wrapper共同實(shí)現(xiàn)完整的進(jìn)度條效果漾岳。
代碼
<!DOCTYPE html>
<html>
<header>
<title>circle</title>
<style type="text/css">
div {
box-sizing: border-box;
}
.downloading {
width: 40px;
height: 40px;
background-color: gray;
position: relative;
}
.loading-wrapper-left,
.loading-wrapper-right {
width: 50%;
height: 100%;
position: absolute;
top: 0;
overflow: hidden;
}
.loading-wrapper-left {
left: 0;
}
.loading-wrapper-right {
right: 0;
}
.loading-circle-left,
.loading-circle-right {
width: 100%;
height: 100%;
border: solid 2px white;
position: absolute;
top: 0;
}
.loading-circle-left {
border-radius: 20px 0 0 20px;
border-right: transparent;
right: 100%;
transform-origin: 100% 50%;
}
.loading-circle-right {
border-radius: 0 20px 20px 0;
border-left: transparent;
left: 100%;
transform-origin: 0% 50%;
}
</style>
</header>
<body>
<div class="downloading">
<div class="loading-wrapper-left">
<div class="loading-circle-right"></div>
</div>
<div class="loading-wrapper-right">
<div class="loading-circle-left"></div>
</div>
</div>
</body>
<script type="text/javascript">
function updateProgress(progress){
if (progress < 0 || progress > 100) {
return;
}
var leftCircleRotateDegree = progress <= 50 ? progress / 100.0 * 360 : 180;
var rightCircleRotateDegree = progress > 50 ? (progress - 50) / 100.0 * 360 : 0;
var leftCircle = document.getElementsByClassName('loading-circle-left')[0];
var rightCircle = document.getElementsByClassName('loading-circle-right')[0];
leftCircle.style.transform = 'rotate('+leftCircleRotateDegree+'deg)';
rightCircle.style.transform = 'rotate('+rightCircleRotateDegree+'deg)';
}
var progress = 0;
setInterval(function(){
if(progress >= 100){
progress = 0;
}else{
progress ++;
}
updateProgress(progress);
},500);
</script>
</html>
