css圆环进度条的几种方法

方法一：

用H5自带的canvas画圆环

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML5 Canvas 圆形进度条并显示数字百分比</title><style>*{margin:0;padding:0;}body{text-align:center;background-color:#000;}</style></head>
<body><canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>
<script>window.onload = function(){var canvas = document.getElementById('canvas'),  //获取canvas元素context = canvas.getContext('2d'),  //获取画图环境，指明为2dcenterX = canvas.width/2,   //Canvas中心点x轴坐标centerY = canvas.height/2,  //Canvas中心点y轴坐标rad = Math.PI*2/100, //将360度分成100份，那么每一份就是rad度speed = 0.2; //加载的快慢就靠它了//绘制5像素宽的运动外圈function blueCircle(n){context.save();context.strokeStyle = "#fff"; //设置描边样式context.lineWidth = 5; //设置线宽context.beginPath(); //路径开始context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)context.stroke(); //绘制context.closePath(); //路径结束context.restore();}//绘制白色外圈function whiteCircle(){context.save();context.beginPath();context.lineWidth = 2; //设置线宽context.strokeStyle = "red";context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);context.stroke();context.closePath();context.restore();}//百分比文字绘制function text(n){context.save(); //save和restore可以保证样式属性只运用于该段canvas元素context.strokeStyle = "#fff"; //设置描边样式context.font = "40px Arial"; //设置字体大小和字体//绘制字体，并且指定位置context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);context.stroke(); //执行绘制context.restore();}//动画循环(function drawFrame(){window.requestAnimationFrame(drawFrame);context.clearRect(0, 0, canvas.width, canvas.height);whiteCircle();text(speed);blueCircle(speed);if(speed > 100) speed = 0;speed += 0.1;}());}
</script></body>
</html>

编译结果：

重写该方法，让进度条可以按照后台传过来的数据按比例显示

紧接着在ts中写方法可供调用

首先在结构体中定义canvas对象：

然后编写绘制内部不变的圆环的函数，此函数不是动态，可以写在主函数中

编写动态外圆环，此圆环用时可以被外部动态调用

最后在页面初始化数据以后调用这个圆环方法，注意，需要调用两个函数，一个是主函数，另一个是按需求所调用的外部圆环

此处只调用了一个方法，所以在显示时也只是显示一个固定的主内环，显示情况如下图

方法二：用两个矩形用css动画动态画一个动态显示的圆环

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>扫一扫二维码马上进入对战</title><style>.circleProgress_wrapper{width: 48px;height: 48px;margin: 0px auto;position: relative;border:1px solid #ddd;}.wrapper{width: 24px;height: 48px;position: absolute;top:0;overflow: hidden;}.right{right:0;}.left{left:0;}.circleProgress{width: 44px;height: 44px;border:2px solid rgb(232, 232, 12);border-radius: 50%;position: absolute;top:0;-webkit-transform: rotate(45deg);}.rightcircle{border-top:2px solid green;border-right:2px solid green;right:0;-webkit-animation: circleProgressLoad_right 5s linear infinite;}.leftcircle{border-bottom:2px solid green;border-left:2px solid green;left:0;-webkit-animation: circleProgressLoad_left 5s linear infinite;}@-webkit-keyframes circleProgressLoad_right{0%{border-top:2px solid #ED1A1A;border-right:2px solid #ED1A1A;-webkit-transform: rotate(45deg);}50%{border-top:2px solid rgb(232, 232, 12);border-right:2px solid rgb(232, 232, 12);border-left:2px solid rgb(81, 197, 81);border-bottom:2px solid rgb(81, 197, 81);-webkit-transform: rotate(225deg);}100%{border-left:2px solid green;border-bottom:2px solid green;-webkit-transform: rotate(225deg);}}@-webkit-keyframes circleProgressLoad_left{0%{border-bottom:2px solid #ED1A1A;border-left:2px solid #ED1A1A;-webkit-transform: rotate(45deg);}50%{border-bottom:2px solid rgb(232, 232, 12);border-left:2px solid rgb(232, 232, 12);border-top:2px solid rgb(81, 197, 81);border-right:2px solid rgb(81, 197, 81);-webkit-transform: rotate(45deg);}100%{border-top:2px solid green;border-right:2px solid green;border-bottom:2px solid green;border-left:2px solid green;-webkit-transform: rotate(225deg);}}</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>

显示情况：

方法三：利用js插件编写

<!DOCTYPE html>
<html lang="cn">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.wrap,.circle,.percent{position: absolute;width: 200px;height: 200px;border-radius: 50%;}.wrap{top:50px;left:50px;background-color: #ccc;}.circle{box-sizing: border-box;border:20px solid #ccc;clip:rect(0,200px,200px,100px);}.clip-auto{clip:rect(auto, auto, auto, auto);}.percent{box-sizing: border-box;top:-20px;left:-20px;}.left{transition:transform ease;border:20px solid blue;clip: rect(0,100px,200px,0);}.right{border:20px solid blue;clip: rect(0,200px,200px,100px);}.wth0{width:0;}.num{position: absolute;box-sizing: border-box;width: 160px;height: 160px;line-height: 160px;text-align: center;font-size: 40px;left: 20px;top: 20px;border-radius: 50%;background-color: #fff;z-index: 1;}</style><script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
</head>
<body>
<div class="wrap"><div class="circle"><div class="percent left"></div><div class="percent right wth0"></div></div><div class="num"><span>0</span>%</div>
</div>
</body>
<script>var percent=0;var loading=setInterval(function(){if(percent>100){percent=0;$('.circle').removeClass('clip-auto');$('.right').addClass('wth0');}else if(percent>50){$('.circle').addClass('clip-auto');$('.right').removeClass('wth0');}$('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");$('.num>span').text(percent);percent++;},200);
</script>
</html>

显示情况

如果有其他方法，希望可以在这一起汇总

css圆环进度条的几种方法相关推荐

javascript 进度条的几种方法
我们先看看最终效果: [url=169]169[/url] 第一步,基本构建基本的代码,看效果演示:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
组态王怎么做进度条_三种方法制作进度条效果
进度条可以说出现在我们生活的方方面面,游戏.视频加载会碰到它,刷新会碰到它,就连网络不顺畅时也会碰到它.进度条不仅仅只是作为信息载入时的标志,还可以运用到片头开场,让观众对接下来的视频内容产生好奇和期 ...
CAD进度条设置3种方法
一.ProgressMeter类通过使用Autodesk.AutoCAD.Runtime命名空间中的ProgressMeter来显示,需要添加对acdbdmgd.dll.acmgd.dll.DotN ...
python中实现进度条的四种方法
文章目录 (一): python程序中使用time模块可以让程序休眠 timesleep(t) 参数t是推迟执行的秒数 import time for i in range(0, 101, 2):ti ...
Python实现进度条的5种方式
转载自:https://blog.csdn.net/qq_36853469/article/details/103925626 这里只列举了部分方法,其他方法或python库暂时还没使用到 1.不用库 ...
两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
CSS 奇技淫巧Box-shadow实现圆环进度条
CSS 奇技淫巧Box-shadow实现圆环进度条文章目录 CSS 奇技淫巧Box-shadow实现圆环进度条一.Box-shadow圆环进度条二.效果预览三.原理刨析四.实际应用五.总结 ...
CSS实现圆环进度条
CSS实现圆环进度条一.静态进度条首先,我们先看一个静态进度条第一步当然是先实现一个最外层的父级圆环. 其次是通过 clip-path画出两个半圆,并绝对定位覆盖在父级圆环. 小于50的时候,我 ...
Unity圆环进度条制作
0. 背景最近有个在Unity中制作圆环进度条的需求,并在圆中显示进度数值,类似于图1: 图1. 圆环进度条平时制作直线的进度条比较多,突然要求做个圆环的有些不适应.不过,这个需求google一下 ...

css圆环进度条的几种方法

css圆环进度条的几种方法相关推荐

最新文章

热门文章