【前端小技巧】CSS3实现环形进度条
- 2019 年 10 月 4 日
- 筆記
前端设计肯定会遇到进度条的问题，很多人直接使用js插件，需要引入js文件，增加页面承载量，容易引起冲突。
实现起来很简单，只需要简单的HTML5和CSS3代码即可。
效果图：
html代码：
<div class="rect-box"> <div class="rect left"> <div class="circle"></div> </div> <div class="rect right"> <div class="circle"></div> </div> </div>
css代码：
.rect-box{ width: 200px; height: 200px; /*border: 1px solid #ccc;*/ box-sizing: border-box; position: relative; } .rect{ width: 100px; height: 200px; box-sizing: border-box; position: absolute; overflow:hidden; top: 0; } .left{ left: 0; } .right{ right: 0; } .rect > div{ width: 200px; height: 200px; border:20px solid transparent; border-radius: 50%; box-sizing: border-box; position: absolute; top:0; z-index: 3; transform: rotate(45deg); } .right .circle{ border-top:20px solid #666; border-right:20px solid #666; border-left:20px solid rgb(81, 197, 81); border-bottom:20px solid rgb(81, 197, 81); right:0; -webkit-animation: right 5s linear infinite; } .left .circle{ border-bottom:20px solid #666; border-left:20px solid #666; left:0; -webkit-animation: left 5s linear infinite; } @-webkit-keyframes right{ 0%{ border-left:20px solid rgb(182, 239, 182); border-bottom:20px solid rgb(182, 239, 182); -webkit-transform: rotate(45deg); } 50%{ border-left:20px solid rgb(81, 197, 81); border-bottom:20px solid rgb(81, 197, 81); -webkit-transform: rotate(225deg); } 100%{ border-left:20px solid green; border-bottom:20px solid green; -webkit-transform: rotate(225deg); } } @-webkit-keyframes left{ 0%{ border-top:20px solid rgb(81, 197, 81); border-right:20px solid rgb(81, 197, 81); -webkit-transform: rotate(45deg); } 50%{ border-top:20px solid rgb(81, 197, 81); border-right:20px solid rgb(81, 197, 81); -webkit-transform: rotate(45deg); } 100%{ border-top:20px solid green; border-right:20px solid green; -webkit-transform: rotate(225deg); } }
作者 | 大神神码 | 蚂蚁开源社区大神，资深开发工程师
