Skip to content

Instantly share code, notes, and snippets.

@shenqihui

shenqihui/index.html

Last active September 3, 2018 14:32
Show Gist options
  • Save shenqihui/232b0b3cea4ef724d06acaf6564e5b33 to your computer and use it in GitHub Desktop.
Save shenqihui/232b0b3cea4ef724d06acaf6564e5b33 to your computer and use it in GitHub Desktop.
Download ZIP
圆环进度条 css + html
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<body>
<style>
.percentage-box {
box-sizing: border-box;
width: 210px;
height: 210px;
position: relative;
background-color: #ff6e00;
border-radius: 50%;
left: 40%;
top: 210px;
}
.percentage-box-content {
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
background: #fff;
border-radius: 50%;
width: 127px;
height: 127px;
transform: translate(-50%, -50%);
text-align: center;
line-height: 127px;
font-size: 32px;
}
.percentage-box-clip{
box-sizing: border-box;
width: 210px;
height: 210px;
position: absolute;
border: 45px solid #ff6e00;
border-radius: 50%;
clip: rect(0, 210px, 210px, 105px);
}
.percentage-box-left{
box-sizing: border-box;
width: 210px;
height: 210px;
position: absolute;
border: 45px solid #ffb537;
border-radius: 50%;
clip: rect(0 105px 210px 0);
top: -45px;
left: -45px;
}
.percentage-box-right{
box-sizing: border-box;
width: 210px;
height: 210px;
position: absolute;
border: 45px solid #ffb537;
border-radius: 50%;
clip: rect(0 210px 210px 105px);
top: -45px;
left: -45px;
}
.percentage-box-width-none{
box-sizing: border-box;
width: 0;
}
.percentage-box-auto{
box-sizing: border-box;
clip: auto;
}
</style>
<div>参考 https://juejin.im/post/5a7c6d0d6fb9a063395c5f59 </div>
<div class="percentage-box">
<!-- 大于 180度需要加 percentage-box-auto -->
<div class="percentage-box-clip percentage-box-auto">
<div class="percentage-box-left" style="transform: rotate(286deg);"></div>
<!-- 大于 180度需要删除 percentage-box-width-none -->
<div class="percentage-box-right"></div>
</div>
<div class="percentage-box-content">
79.5%
</div>
</div>
<br>
<div class="percentage-box">
<!-- 小于 180度需要删除 percentage-box-auto -->
<div class="percentage-box-clip">
<div class="percentage-box-left" style="transform: rotate(46deg);"></div>
<!-- 大于 180度需要增加 percentage-box-width-none -->
<div class="percentage-box-right percentage-box-width-none"></div>
</div>
<div class="percentage-box-content">
12.8%
</div>
</div>
</body>
</html>
@shenqihui
Copy link
Author

shenqihui commented Sep 3, 2018 •
edited

image

效果

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment