浅谈一下关于使用css3来制作圆环进度条
最近PC端项目要做一个这样的页面出来，其他的都很简单，关键在于百分比的圆环效果。我最初打算是直接使用canvas来实现的，因为canvas实现一个圆是很简便的。
下面贴出canvas实现圆环的代码，有需要的可以拿去尝试，因为今天主要是讲css3的方法，canvas我就不多解释了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById('canvas');
var process = 0;
var context = canvas.getContext('2d'); // 画外圆
context.beginPath();
context.arc(100, 100, 80, 0, Math.PI*2);
context.closePath();
context.fillStyle = '#666';
context.fill();
drawCricle(context, process); function drawCricle(ctx, percent){
// 进度环
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill(); // 内圆
ctx.beginPath();
ctx.arc(100, 100, 75, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = 'white';
ctx.fill(); // 填充文字
ctx.font= "bold 30px microsoft yahei";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.textBaseline = 'middle';
ctx.moveTo(100, 100);
ctx.fillText(process + '%', 100, 100);
} </script>
</body>
</html>
后来之所以是因为没有去使用canvas去实现是因为产品和我说这个任务以后会非常多，我问会不会超过99个？他说有可能，你上限设999吧。
要是999个canvas的圆环去渲染。。。上百个都够呛了吧，无奈之下只好去选用css3，至少这样会快很多。但是css貌似没有直接画个进度环的方法吧。
我稍后会贴出完整的代码，这里先讲述一下大概的结构。
要实现进度条的样式用css的话我们能想到的方法好像只有用大小不同的圆去叠加，如果是要那种动画不停旋转的loading效果那太简单了，我会很开心的，可惜。。
首先我们要来个背景圆，比如这样
接着来个内圆去遮罩
有点像样子了，那我们接下来就是重点了，如何让它跟着百分比如动态显示改变。js是必须的，我先讲样式
下一步我们要创建两个半圆比如这样
css实现半圆的方法有很多，大家可以自行百度，我是采用clip:rect();这个方法去裁剪成半圆的 ，做完这些 我们就只需要用js去控制左右两边的半圆rotate()的旋转角度就好了。
记得最后把左右两个半圆的颜色统一一下就可以了，下面我会贴出源代码，大家引入一个jq就可以直接用了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.circle {
width: 200px;
height: 200px;
position: relative;
border-radius: 50%;
background: red;
} .clip_left,.clip_right{
width:200px;
height:200px;
position: absolute;
top: 0px;left: 0px;
}
.circle_left, .circle_right{
width:200px;
height:200px;
position: absolute;
border-radius: 50%;
top: 0px;left: 0px;
background: green;
}
/*出于展示用的改变背景色*/
/*.circle_left{
background: green;
}
.circle_right{
background: lightblue;
}*/
.circle_right,.clip_right {
clip:rect(0,auto,auto,100px);
}
.circle_left , .clip_left{
clip:rect(0,100px,auto,0);
} /*
*当top和left取值为auto时，相当于0
*当bottom和right取值为auto时，相当于100%
*/
.mask {
width: 150px;
height: 150px;
border-radius: 50%;
left: 25px;
top: 25px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 150px;
font-size: 16px;
} </style>
</head>
<body>
<!--背景圆-->
<div class="circle">
<!--左半边圆-->
<div class="circle_left">
<div class="clip_left"> </div>
</div>
<!--右半边圆-->
<div class="circle_right">
<div class="clip_right"></div>
</div>
<div class="mask">
<span>10</span>%
</div>
</div>
<script src="../jquery-2.2.3.min.js"></script>
<script>
$(function(){
if( $('.mask span').text() <= 50 ){
$('.circle_right').css('transform','rotate('+($('.mask span').text()*3.6)+'deg)');
}else{
$('.circle_right').css({
'transform':'rotate(0deg)',
"background":"red"
});
$('.circle_left').css('transform','rotate('+(($('.mask span').text()-50)*3.6)+'deg)');
}
})
</script>
</body>
</html>
随笔很潦草，有什么不足的地方还请大家多多交流学习。
邮箱：506117150@qq.com
浅谈一下关于使用css3来制作圆环进度条的更多相关文章
- css3 制作圆环进度条
引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...
- 两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
- CSS3实现圆环进度条
摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...
- 浅谈SRT和NDI®在广电制作领域的技术优势和应用
随着技术的不断发展,用户对音视频质量的要求不断提升,对视频内容观看的方式也日趋多元化.摄像设备的分辨率从高清到4K,甚至有些厂家推出了6K或8K的产品:用户不再局限于从有线电视的直播节目中收看内容,智 ...
- 移动端纯CSS3制作圆形进度条所遇到的问题
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...
- CSS3制作同心圆进度条
1.css代码 此处在制作进度条时,是旋转进度条的半圆(红色),背景使用灰白(如果使用红色作为背景,旋转灰白遮罩,在浏览器中可能会有渲染bug) .wrapper{ display:block;pos ...
- CSS制作环形进度条
参考来源 <Radial progress indicator using CSS>,该文核心是用纯CSS来做一个环形的进度条.纯css的意思就是连百分比这种数字,都是css生成的.文章作 ...
- iOS 开发技巧-制作环形进度条
有几篇博客写到了怎么实现环形进度条,大多是使用Core Graph来实现,实现比较麻烦且效率略低,只是一个小小的进度条而已,我们当然是用最简单而且效率高的方式来实现. 先看一下这篇博客,博客地址:ht ...
- 基于css3的环形动态进度条（原创）
基于css3实现的环形动态加载条,也用到了jquery.当时的想法是通过两个半圆的转动,来实现相应的效果,其实用css3的animation也可以实现这种效果.之所以用jquery是因为通过jquer ...
随机推荐
- springmvc之格式化要显示的小数或者日期。
把保存的小数或者日期按照想要的格式显示. 首先导入jar包joda-time-2.3.jar,下载地址http://pan.baidu.com/s/1gfNuUfp 这里使用注解的方式进行格式化. 创 ...
- S3C2440上RTC时钟驱动开发实例讲解(转载)
嵌入式Linux之我行,主要讲述和总结了本人在学习嵌入式linux中的每个步骤.一为总结经验,二希望能给想入门嵌入式Linux的朋友提供方便.如有错误之处,谢请指正. 共享资源,欢迎转载:http:/ ...
- CentOS-7下安装MySQL5.6.22
参考: http://www.2cto.com/database/201501/371451.html 安装环境 CentOS版本:CentOS-7 因为之前安装过,没有成功,但是有之前安装的文件 ...
- rc.local文件
rc.local用于自启动一些服务. 查看有哪些自启动服务: cat /etc/rc.local
- 10分钟学习pandas
10 Minutes to pandas This is a short introduction to pandas, geared mainly for new users. You can se ...
- DELPHI实现百度开放平台
学习百度语音 百度语音开发平台 http://yuyin.baidu.com/ 百度开发者账号 13600514494,短信登录 应用账号 词语听写 App ID: 7799366 API Key: ...
- owin建控制台应用程序步骤
1. Install-Package Microsoft.AspNet.WebApi.OwinSelfHost 2. 建立OWIN Startup类 public void Configurati ...
- PhpStorm设置编码
PhpStorm是一个轻量级且便捷的PHP IDE,其旨在提供用户效率,可深刻理解用户的编码,提供智能代码补全,快速导航以及即时错误检查. 本文为大家讲解的是如何设置phpstorm 编辑器的编码,感 ...
- WCF、MongoDB
http://www.cnblogs.com/quietwalk/archive/2011/08/09/2132573.html http://www.cnblogs.com/huangxinchen ...
- 查询Oracle正在执行和执行过的SQL语句
---正在执行的 select a.username, a.sid,b.SQL_TEXT, b.SQL_FULLTEXT from v$session a, v$sqlarea b where a.s ...