圆形进度条效果在APP中很常见的，例如在我们下载时的圆形进度条，清除效果进度条。 下面我来介绍一个简单的圆形进度条效果是怎么实现的
首先，创建一个大小自定义的div模块为外层，其下再创建布局两个div左右布局，在这两个div下分别存在子div，html样式：
<div class="box">
<div class="circle left">
<div class='circleleft' > </div>
</div>
<div class="circle right">
<div class='circleright'></div>
</div>
</div>
其次设置div样式：这主讲要点
- 布局父div大小相等左右布局，大小是是外层div的大小的一般1，并且设置多出隐藏
- 两个内部子元素设置大小为外层div大小，的圆形；
- 上两步的到两个半圆旋转到竖立再将右边半圆移动拼接成圆
- 实现圆形旋转，加动画效果，分别给两个圆添加
下面是完整代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.box{
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
.circle{
width: 200px;
height: 400px;
border: 1px solid transparent;
position:absolute;
overflow: hidden;
}
.left{
left: 0;
}
.right{
right: 0;
}
.circleleft{
width: 400px;
height: 400px;
border: 20px solid transparent;
position:absolute;
border-bottom:20px solid red;
border-left:20px solid red ;
border-radius: 50%;
transform:rotate(45deg);
animation: move1 5s infinite linear;
}
.circleright{
width: 400px;
height: 400px;
border: 20px solid transparent;
position:absolute;
border-top:20px solid red;
border-right:20px solid red;
border-radius: 50%;
right:0;
transform:rotate(45deg);
animation: move 5s infinite linear;
}
@keyframes move{
0%{
transform:rotate(45deg)
}
50%,100%{
transform:rotate(225deg)
}
}
@keyframes move1{
0%,50%{
transform:rotate(45deg)
}
100%{
transform:rotate(225deg)
}
}
</style>
</head>
<body>
<div class="box">
<div class="circle left">
<div class='circleleft' > </div>
</div>
<div class="circle right">
<div class='circleright'></div>
</div>
</div>
</body>
</html>