<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Circle Progress</title>
<style type="text/css">
.flex-row {display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;}
.flex-row > .flex-main {-webkit-flex:1 1 auto;flex:1 1 auto;}
.flex-row > .flex-side {-webkit-flex:0 0 auto;flex:0 0 auto;}
.circle-progress {position:relative;}
.circle-progress .progress {}
.circle-progress .progress:after {content:'200B';display:block;height:0;clear:both;overflow:hidden;}
.circle-progress .progress .left {float:left;width:50px;height:100px;overflow:hidden;}
.circle-progress .progress .left .arc {width:100px;height:100px;border-radius:50%;background:linear-gradient(to right, transparent 0%, transparent 50%, #369 50%, #369 100%);transform-origin:center center;transform:rotate(30deg);}
.circle-progress .progress .right {float:left;width:50px;height:100px;overflow:hidden;}
.circle-progress .progress .right .arc {margin-left:-100%;width:100px;height:100px;border-radius:50%;background:linear-gradient(to right, #369 0%, #369 50%, transparent 50%, transparent 100%);transform-origin:center center;transform:rotate(180deg);}
.circle-progress .content {position:absolute;top:5px;left:5px;width:90px;height:90px;border-radius:50%;border:5px solid #FFF;background-color:#FFF;box-sizing:border-box;box-shadow:0 0 2px 1px #369, 0 0 2px 1px #369 inset;overflow:hidden;}
.circle-progress .content .chart {margin-top:50%;height:50%;}
.circle-progress .content .chart .bar {width:0;border-top:0 solid transparent;box-sizing:border-box;}
.circle-progress .content .chart .bar-peak {position:relative;}
.circle-progress .content .chart .bar-peak .dot {position:absolute;display:block;margin-right:-2px;margin-top:-2px;width:5px;height:5px;top:0;right:0;border-radius:50%;box-shadow:0 0 0 1px #369 inset;z-index:5;}
.circle-progress .content .chart .bar-peak-left {border-left:10px solid #DEF;}
.circle-progress .content .chart .bar-peak-right {border-right:10px solid #DEF;}
.circle-progress .content .chart .bar-peak-left .dot {right:0;}
.circle-progress .content .chart .bar-peak-right .dot {right:-10px;}
</style>
</head>
<body>
<div class="circle-progress debug">
<div class="progress">
<div class="left"><div class="arc"></div></div>
<div class="right"><div class="arc"></div></div>
</div>
<div class="content">
<div class="flex-row chart" style="align-items:flex-end;">
<div class="flex-side bar bar-peak bar-peak-left" style="border-top-width:0;height:50%;"><i class="dot"></i></div>
<div class="flex-side bar bar-peak bar-peak-right" style="border-top-width:10px;height:70%;"><i class="dot" style="margin-top:-10px;"></i></div>
<div class="flex-side bar bar-peak bar-peak-left" style="border-top-width:10px;height:70%;"><i class="dot"></i></div>
<div class="flex-side bar bar-peak bar-peak-right" style="border-top-width:25px;height:100%;"><i class="dot" style="margin-top:-25px;"></i></div>
<div class="flex-side bar bar-peak bar-peak-left" style="border-top-width:10px;height:100%;"><i class="dot"></i></div>
<div class="flex-side bar bar-peak bar-peak-left" style="border-top-width:20px;height:80%;"><i class="dot"></i></div>
<div class="flex-side bar bar-peak bar-peak-right" style="border-top-width:10px;height:60%;"><i class="dot" style="margin-top:-10px;"></i></div>
</div>
</div>
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
