前言：
目前看官们对“http进度条”可能比较珍视，姐妹们都需要分析一些“http进度条”的相关资讯。那么小编也在网上搜集了一些对于“http进度条””的相关内容，希望咱们能喜欢，咱们一起来学习一下吧！效果图
在渲染页面的过程中，进度条是我们最为常见的，有条形进度条，圆环进度条，圆形进度条。今天，我们就来实现一下圆形进度条。
用到的知识点：
1、transform：rotate；（旋转）2、animation；（动画关键帧）
首先，我们创建一个box，作为父级容器，定宽定高（160px），定位（position：relative）;
.box{
width: 160px;
height: 160px;
margin: 200px auto;
position: relative;
}
圆形进度条，分为左右两部分，利用时间差，通过动画关键帧来达到进度效果。
接下来，我们首先实现左侧部分，创建一个div，类名为left-box，定宽定高（80px，160px）；定位（position：absolute）；
在left-box下创建一个div为子元素，类名为left-tran 和 left。接下来，设置left-tran样式。
我们要明白，进度条的实现是通过时间差，改变边框的颜色。通俗一点：就是一个div，width和height都为0px；边框宽度设为100%；然后top和left为一组，bottom和right为一组，分别设置不同的颜色。效果如下图：
接下来。将父级设置overflow：hidden。超出部分隐藏。这样就只显示一半的边框，随后便利用transform：rotate旋转45deg，边框边圆角得到最终效果，如下图：
最后设置关键帧，不同的边框颜色就会相互转变
这样。左侧的样式就已经完成，右侧的与之相似，这里，我们就不在这里多加描述。
待完成右侧样式，两个关键帧动画相互协调，就可以完成一个圆形进度条啦。
今天的全部代码如下：
<!DOCTYPE html><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> * { padding: 0px; margin: 0px; } .box { width: 200px; height: 200px; position: relative; margin: 100px auto; box-sizing: border-box; } .left-box{ width: 100px; height: 200px; position: absolute; left: 0px; top: 0px; box-sizing: border-box; overflow: hidden; } .left-tran{ width: 0px; height: 0px; border: 100px solid; box-sizing: border-box; transform: rotate(45deg); border-radius: 50%; } .left{ border-left: 100px solid #e3e4e5; border-bottom: 100px solid #e3e4e5; animation: leftmove 10s linear infinite; } @keyframes leftmove{ 0%{ transform: rotate(45deg); } 50%{ transform: rotate(45deg); } 100%{ transform: rotate(225deg); } } .right-box{ width: 100px; height: 200px; position: absolute; top: 0px; right: 0px; box-sizing: border-box; overflow: hidden; } .right-tran{ width: 0px; height: 0px; border: 100px solid; position: absolute; top: 0px; right: 0px; transform: rotate(45deg); border-radius: 50%; } .right{ border-right: 100px solid #e3e4e5; border-top: 100px solid #e3e4e5; animation: rightmove 10s linear infinite; } @keyframes rightmove{ 0%{ transform: rotate(45deg); } 50%{ transform: rotate(225deg); } 100%{ transform: rotate(225deg); } } </style></head><body> <div class="box"> <div class="left-box"> <div class="left-tran left"></div> </div> <div class="right-box"> <div class="right-tran right"></div> </div> </div></body></html>进度条，结合和时间戳，就可以很好的完成一个完美的时间进度条了。
希望今天的知识点对大家有所帮助。
标签： #http进度条 #css圆化 #html圆形代码 #html怎么做进度条
