前端设计肯定会遇到进度条的问题,很多人直接使用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);
}
}
作者 | 大神神码 | 蚂蚁开源社区大神,资深开发工程师