整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

CSS实现简单的圆形进度条

CSS实现简单的圆形进度条

果图

在渲染页面的过程中，进度条是我们最为常见的，有条形进度条，圆环进度条，圆形进度条。今天，我们就来实现一下圆形进度条。

用到的知识点：

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>

进度条，结合和时间戳，就可以很好的完成一个完美的时间进度条了。

希望今天的知识点对大家有所帮助。

.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。


2.效果图1


3.代码：保存为html，用浏览器打开即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圆形百分比进度条效果</title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.bg{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			background: #ccc;
			position: relative;
			margin: 20px auto;
		}
		.circle-right, .circle-left, .mask-right, .mask-left{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.circle-right, .circle-left{
			background: skyblue;
		}
		.mask-right, .mask-left{
			background: #ccc;
		}
		.circle-right, .mask-right{
			clip: rect(0,200px,200px,100px);
		}
		.circle-left, .mask-left{
			clip: rect(0,100px,200px,0);
		}
		.text{
			width: 160px;
			height: 160px;
			line-height: 160px;
			text-align: center;
			font-size: 34px;
			color: deepskyblue;
			border-radius: 100%;
			background: #fff;
			position: absolute;
			top: 20px;
			left: 20px;
		}
		</style>
	</head>
	<body>
		<div class="bg">
			<div class="circle-right"></div>
			<!--100%是显示百分数，动态显示由0~100-->
			<div class="text">100%</div> 

		</div>
		
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){				
				//获取百分比值
				var num=parseInt($('.text').html());
				
				//通过计时器来显示过渡的百分比进度
				var temp=0;
				var timer=setInterval(function(){
					calculate(temp);
					//清除计时器结束该方法调用
					if(temp==num){
						clearInterval(timer);
					}
					temp++;
				},30)

				//改变页面显示百分比
				function calculate(value){
					//改变页面显示的值
					$('.text').html(value + '%');
					
					//清除上次调用该方法残留的效果
					$('.circle-left').remove();
					$('.mask-right').remove();
					
					//当百分比小于等于50
					if(value <=50){
						var html='';
						
						html +='<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						
						//元素里添加子元素
						$('.circle-right').append(html);
					}else{
						value -=50;
						var html='';
						
						html +='<div class="circle-left">';
						html +='<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						html +='</div>';
						
						//元素后添加元素
						$('.circle-right').after(html);
					}
				}
			})
		</script>
		
	</body>
</html>

4.拆分法：把一个含有css和js（JavaScript）的html，拆掉三个文件，一个叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一个文件夹内。这是./的意思，也可以指定文件夹。

4.1 cirbar1.html的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圆形百分比进度条效果v2</title>
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->
		<!--style type="text/css"-->
		<link href="./cirbar1.css" rel="stylesheet" />
	</head>
	<body>
		<div class="bg">
			<div class="circle-right"></div>
			
			<div class="text">100%</div> 
		</div>
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->
		<!--script type="text/javascript"-->
		<script src="./cirbar1.js"></script>
	</body>
</html>

4.2 cirbar1.css的代码：

		*{
			margin: 0;
			padding: 0;
		}
		.bg{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			background: #ccc;
			position: relative;
			margin: 20px auto;
		}
		.circle-right, .circle-left, .mask-right, .mask-left{
			width: 200px;
			height: 200px;
			border-radius: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.circle-right, .circle-left{
			background: skyblue;
		}
		.mask-right, .mask-left{
			background: #ccc;
		}
		.circle-right, .mask-right{
			clip: rect(0,200px,200px,100px);
		}
		.circle-left, .mask-left{
			clip: rect(0,100px,200px,0);
		}
		.text{
			width: 160px;
			height: 160px;
			line-height: 160px;
			text-align: center;
			font-size: 34px;
			color: deepskyblue;
			border-radius: 100%;
			background: #fff;
			position: absolute;
			top: 20px;
			left: 20px;
		}

4.3 cirbar1.js的代码：

			$(function(){				
				//获取百分比值
				var num=parseInt($('.text').html());
				
				//通过计时器来显示过渡的百分比进度
				var temp=0;
				var timer=setInterval(function(){
					calculate(temp);
					//清除计时器结束该方法调用
					if(temp==num){
						clearInterval(timer);
					}
					temp++;
				},30)

				//改变页面显示百分比
				function calculate(value){
					//改变页面显示的值
					$('.text').html(value + '%');
					
					//清除上次调用该方法残留的效果
					$('.circle-left').remove();
					$('.mask-right').remove();
					
					//当百分比小于等于50
					if(value <=50){
						var html='';
						
						html +='<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						
						//元素里添加子元素
						$('.circle-right').append(html);
					}else{
						value -=50;
						var html='';
						
						html +='<div class="circle-left">';
						html +='<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
						html +='</div>';
						
						//元素后添加元素
						$('.circle-right').after(html);
					}
				}
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图


6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->
<!DOCTYPE html> 

<!--第2步---html大框架-->
<html lang="en">

<!--第2-1步---head部分-->
<head>
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->
    <meta charset="utf-8" />
    <!--第2-1-2步---标题名称-->
    <title>圆形进度条v1</title>
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->
    <!--第2-1-3步---导入css文件-->
    <link href="./cirbar.css" rel="stylesheet" />
</head>

<!--第2-2步---body部分-->
<body>
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>
    <!--第2-2-2步---导入js文件部分-->
    <script src="./cirbar.js"></script>

<!--注意收尾-->
</body>
<!--注意收尾-->
</html>

6.2 cirbar.css代码：

.canvas {
            /*画布的背景颜色设置为：黑色*/
            background:#303030;
            
        }

6.3 cirbar.js代码：

window.onload=function () {
            var canvas=document.getElementById('canvas'),  //获取canvas元素
                context=canvas.getContext('2d'),  //获取画图环境，指明为2d
                centerX=canvas.width / 2,   //Canvas中心点x轴坐标
                centerY=canvas.height / 2,  //Canvas中心点y轴坐标
                rad=Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
                speed=0.1; //加载的快慢就靠它了
            //绘制红色外圈
            function blueCircle(n) {
                context.save();
                context.strokeStyle="	#1E90FF"; //随百分数转动的外圈的颜色为蓝色
                context.lineWidth=3; //设置线宽
                context.beginPath(); //路径开始
                //注意-为顺时针，+为逆时针
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false); 
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false); 
                context.stroke(); //绘制
                context.closePath(); //路径结束
                context.restore();
            }
            //绘制白色外圈，初始的白色外圈
            function whiteCircle() {
                context.save();
                context.beginPath();
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样
                //context.strokeStyle="#F8F8FF";
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }
            //百分比文字绘制
            function text(n) {
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
                context.strokeStyle="#7FFF00";//设置中间动态百分数的颜色
                context.font="25px Arial"; //设置字体大小和字体
                context.textAlign='center';//字体水平居中
                context.textBaseline='middle';//字体垂直居中
                //绘制字体，并且指定位置
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);
                context.stroke(); //执行绘制
                context.restore();
            }
            //循环获取
            (function drawFrame() {
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);
                whiteCircle();
                text(speed);
                blueCircle(speed);
                if (speed < 100) {
                    //1可从后台获取值,也是从0~100，step为1，代表速度
                    speed +=1;
                }
            }());
        }

注意到6.3js文件与4.3js文件的区别了么？一个有：window.onload=，一个没有，且只有$和小括号，因为外部的就是文件定义了一部分功能。

是Web开发和CSS的新手吗？你是否想过如何在互联网上看到那些漂亮的形状？别再奇怪了。你来对地方了。

下面，我将解释使用CSS创建形状的基本知识。还有很多要告诉你关于这个话题！因此，我不会涵盖所有（绝大部分）工具和形状，但这应该使你基本了解如何使用CSS创建形状，并且创建文字环绕图形的方式方法。

有些形状比其他形状需要更多的“技巧和窍门”。使用CSS创建形状通常是使用宽度，高度，顶部，右侧，左侧，边框，底部，变换和伪元素（例如：before和：after）的组合。我们还具有更现代的CSS属性，可使用诸如shape-outside和clip-path之类的形状来创建形状，这些内容我将在后面写出来。


在线咨询
上一篇：“签到”怎么做才能抓住你的用户？
下一篇：这可能是史上最详细的 IDEA 中使用 Debug

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 东兴市 通化 丁青县 钦南区 本溪满族自治县 印江土家族苗族自治县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服