纯css制作圆形进度条

效果图大概是这样的

第一步先定义出一个方形盒子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.circleProgress_wrapper{width: 200px;height: 200px;margin: 50px auto;position: relative;border:1px solid #ddd;}</style>
</head>
<body><div class="circleProgress_wrapper"></div>
</body>
</html>

第二步将盒子分为两半，左右个占一半

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.circleProgress_wrapper{width: 200px;height: 200px;margin: 50px auto;position: relative;border:1px solid #ddd;}.wrapper{width: 100px;height: 200px;position: absolute;top:0;overflow: hidden;}.right{right:0;border: solid 1px black;}.left{left:0;border: solid 1px red;}</style>
</head>
<body><div class="circleProgress_wrapper"><div class="wrapper right"></div><div class="wrapper left"></div></div>
</body>
</html>

第三步在这两个盒子中再分别放一个盒子并且给他们的边框大小为20px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.circleProgress_wrapper{width: 200px;height: 200px;margin: 50px auto;position: relative;border:1px solid #ddd;}.wrapper{width: 100px;height: 200px;position: absolute;top:0;/* overflow: hidden; */}.right{right:0;border: solid 1px black;}.left{left:0;border: solid 1px red;}.circleProgress{width: 160px;height: 160px;border:20px solid rgb(172, 172, 172);position: absolute;top:0;}.rightcircle{border: solid 20px rgb(71, 82, 10);right:0;}.leftcircle{border: solid 20px rgb(218, 252, 24);left:0;}</style>
</head>
<body><div class="circleProgress_wrapper"><div class="wrapper right"><div class="circleProgress rightcircle"></div></div><div class="wrapper left"><div class="circleProgress leftcircle"></div></div></div>
</body>
</html>

到这一步大家可以看见一个黄色的方形，但只能看见一个，另一个被这个黄色方形遮住了，这个时候我们要给那两个class为 wrapper的div加上个属性 overflow:hidden

          .wrapper{width: 100px;height: 200px;position: absolute;top:0;overflow: hidden;}

加上之后我们在看一看

此时我们已经能看见两个方形了，只不过都只能看见一半，因为加上 overflow:hidden 后超出的部分隐藏了

第四步给这两个黄色的方形和褐色的方形定义右上边框和左下边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.circleProgress_wrapper{width: 200px;height: 200px;margin: 50px auto;position: relative;border:1px solid #ddd;}.wrapper{width: 100px;height: 200px;position: absolute;top:0;overflow: hidden;}.right{right:0;border: solid 1px black;}.left{left:0;border: solid 1px red;}.circleProgress{width: 160px;height: 160px;border:20px solid rgb(172, 172, 172);position: absolute;top:0;}.rightcircle{border-top:20px solid rgb(71, 82, 10);border-right:20px solid rgb(71, 82, 10);right:0;}.leftcircle{border-bottom:20px solid rgb(218, 252, 24);border-left:20px solid rgb(218, 252, 24);left:0;}</style>
</head>
<body><div class="circleProgress_wrapper"><div class="wrapper right"><div class="circleProgress rightcircle"></div></div><div class="wrapper left"><div class="circleProgress leftcircle"></div></div></div>
</body>
</html>

好现在我们可以看见三种颜色黄色褐色以及灰色

一个是左下边框的黄色和右上边框的褐色这两个颜色分别是我们自己刚刚定义的

而那个灰色则是默认色，因为之前我们是给所有的边框都定义了颜色，当现在我们只给左下和右上的边框定义了颜色，其他没有定义颜色的部分就默认为灰色

第五步给这两个黄色和褐色的方形加上个属性 border-radius: 50%;

          .circleProgress{width: 160px;height: 160px;border:20px solid rgb(172, 172, 172);position: absolute;top:0;border-radius: 50%;}

此时我们可以看到这样的效果

第六步旋转角度关键的一步来了 transform: rotate(-135deg);

          .circleProgress{width: 160px;height: 160px;border:20px solid rgb(172, 172, 172);position: absolute;top:0;border-radius: 50%;transform: rotate(-135deg);}

此时我们看到的是一个全灰色的圆形

但这其实是两个圆形就是刚刚那两个黄色和褐色的圆形，只不过旋转之后有颜色的部分都被遮住了

看到的只是没有颜色的部分所有看起来是一个圆形

可以把 overflow: hidden; 属性暂时去掉就能看到旋转后的效果

第七步添加动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.circleProgress_wrapper{width: 200px;height: 200px;margin: 50px auto;position: relative;border:1px solid #ddd;}.wrapper{width: 100px;height: 200px;position: absolute;top:0;overflow: hidden;}.right{right:0;border: solid 1px black;}.left{left:0;border: solid 1px red;}.circleProgress{width: 160px;height: 160px;border:20px solid rgb(172, 172, 172);position: absolute;top:0;border-radius: 50%;transform: rotate(-135deg);}.rightcircle{border-top:20px solid rgb(71, 82, 10);border-right:20px solid rgb(71, 82, 10);right:0;animation: circleProgressLoad_right 5s linear infinite;}.leftcircle{border-bottom:20px solid rgb(218, 252, 24);border-left:20px solid rgb(218, 252, 24);left:0;animation: circleProgressLoad_left 5s linear infinite;}@keyframes circleProgressLoad_right{0%{-webkit-transform: rotate(-135deg);}50%,100%{-webkit-transform: rotate(45deg);}}@keyframes circleProgressLoad_left{0%,50%{-webkit-transform: rotate(-135deg);}100%{-webkit-transform: rotate(45deg);}}</style>
</head>
<body><div class="circleProgress_wrapper"><div class="wrapper right"><div class="circleProgress rightcircle"></div></div><div class="wrapper left"><div class="circleProgress leftcircle"></div></div></div>
</body>
</html>

这里注意左边圆形的动画的开始时间是50% 而右边的是在0%

此时我们可以看一下旋转的效果我这没有动图大家可以自己复制代码看一下

最后一步将两个圆形的边框颜色统一，此时圆形进度条完成

           .rightcircle{border-top:20px solid rgb(218, 252, 24);border-right:20px solid rgb(218, 252, 24);right:0;animation: circleProgressLoad_right 5s linear infinite;}.leftcircle{border-bottom:20px solid rgb(218, 252, 24);border-left:20px solid rgb(218, 252, 24);left:0;animation: circleProgressLoad_left 5s linear infinite;}

最后贴出完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>.circleProgress_wrapper{width: 200px;height: 200px;margin: 50px auto;position: relative;border:1px solid #ddd;}.wrapper{width: 100px;height: 200px;position: absolute;top:0;overflow: hidden;}.right{right:0;border: solid 1px black;}.left{left:0;border: solid 1px red;}.circleProgress{width: 160px;height: 160px;border:20px solid rgb(172, 172, 172);position: absolute;top:0;border-radius: 50%;transform: rotate(-135deg);}.rightcircle{border-top:20px solid rgb(218, 252, 24);border-right:20px solid rgb(218, 252, 24);right:0;animation: circleProgressLoad_right 5s linear infinite;}.leftcircle{border-bottom:20px solid rgb(218, 252, 24);border-left:20px solid rgb(218, 252, 24);left:0;animation: circleProgressLoad_left 5s linear infinite;}@keyframes circleProgressLoad_right{0%{-webkit-transform: rotate(-135deg);}50%,100%{-webkit-transform: rotate(45deg);}}@keyframes circleProgressLoad_left{0%,50%{-webkit-transform: rotate(-135deg);}100%{-webkit-transform: rotate(45deg);}}</style>
</head>
<body><div class="circleProgress_wrapper"><div class="wrapper right"><div class="circleProgress rightcircle"></div></div><div class="wrapper left"><div class="circleProgress leftcircle"></div></div></div>
</body>
</html>

纯css制作圆形进度条相关推荐

如何在HTML中设计步骤进度条,使用纯CSS制作步骤进度条
步骤进度条的使用场景很多,比如说购物流程 .订单流程.面试流程等都要用到它.网上常见的做法是使用CSS图片精灵,该做法的优点是兼容性强,但缺点也很明显:难以自适应设备,而且会加载额外的图片资源.有没 ...
圆的css样式,圆形进度条css3样式
30% 以下样式100upx是50upx的2倍,这是尺寸比例 .con { position: relative; display: inline-block; height: 100upx; wid ...
[html] 如何使用纯html制作一个进度条？
[html] 如何使用纯html制作一个进度条? HTML中的progress () 元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元 ...
css实现圆形进度条
css实现圆形进度条先来看一下效果图: 具体实现步骤: 先画一个大圆,底色为#ffffff; <div class="third"> </div> .th ...
纯CSS制作自适应分页条-分享------彭记（019）
纯css制作自适应分页条效果图: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
css实现圆形进度条加载动画
这里我会把遇到这个需求时的实现过程和遇到的问题记录下来,如果只是要看最终实现结果可直接滑到底部看实现代码. 我们经常可以看到网上有一些圆形进度条跟随数字的变化慢慢变成一个圆,这个动画实际上可以通过纯c ...
html转动的圆圈,CSS圆形旋转效果纯CSS制作圆形旋转菜单效果(七步完成)
我们理念中的菜单都是矩形的,不是横向排列就是纵向排列,这里我们打破了常规的思维,把菜单做成圆形的. 在这里我们不得不克服几个问题: 如何定义html如何悬停定位菜单元素在此之前先看一下最终效果是怎样 ...
使用canvas制作圆形进度条
1. 背景在本公司的定制app平台中,需要在日历页面中显示用户的运动进度,平常的直线进度无法满足要求. 2. 核心思路先使用 canvas 绘制一个圆再使用 canvas 绘制一个进度圆 3. ...
如何用CSS做倒计时/圆形进度条效果
前言:有时,我们会见一些圆形的进度条,随着进度条的推进,进行倒计时的变化. 若是只实现一个圆环的话,只用border和border-radius就能画出来. 但是这样的圆环不能动,产生进度条效果的重要 ...

纯css制作圆形进度条

纯css制作圆形进度条相关推荐

最新文章

热门文章