css3静态进度条,CSS3+JS实现静态圆形进度条

一、实现原理

首先，我们来一个圆(黑色)。

接着，再来两个半圆，将黑色的圆遮住。(为了演示，左右两侧颜色不一样)

这时候，我们顺时针旋转右侧蓝色的半圆，下面的黑色圆就会暴露出来，比如我们旋转45度(12.5%)，效果出来了。

如果我们将蓝色的右半圆同样设置成灰色，看效果，一个12.5%的饼图就出来了！

OK，我们再旋转更大的度数试试，比如40%(144度)，50%(180度)，60%(216度)如下图。

我们发现，旋转180度之后右半圆与左半圆重合了，如果再旋转，就会在右上角冒出来，显然不是我们想要的。

我们希望的是，继续旋转被黑色遮住。。。嗯。。。怎么做呢？

我们将右侧的圆回归原位，把它刷成黑色(和底色一样)，然后旋转左边的半圆(它在右侧半圆的更底层)，这样，它就会被右侧半圆遮住了。好的，废话不多说，我们将左侧的半圆顺时针旋转45度，效果出来了。可以想象，继续旋转，180度的时候，就完全被右侧半圆遮住，而左侧底色全部暴露，这样100%显示出来了。

最后，加上一个白色的小圆，放在正中间就行了。

好的，到这里，我们已经明白如何实现的了。

二、代码实现

html部分

60%

css部分

/*支持IE9及以上*/

.circle-bar { font-size:200px; width: 1em; height: 1em; position: relative; background-color: #333; }

.circle-bar-left,.circle-bar-right { width: 1em; height: 1em; background-color: #eee; }

/*

这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层，

clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp

*/

.circle-bar-right { clip:rect(0,auto,auto,.5em); }

.circle-bar-left { clip:rect(0,.5em,auto,0); }

.mask { width: 0.8em; height: 0.8em; background-color: #fff;text-align: center;line-height: 0.2em; color:rgba(0,0,0,0.5); }

.mask :first-child { font-size: 0.3em; height: 0.8em; line-height: 0.8em; display: block; }

/*所有的后代都水平垂直居中，这样就是同心圆了*/

.circle-bar * { position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; }

/*自身以及子元素都是圆*/

.circle-bar, .circle-bar > * { border-radius: 50%; }

JavaScript实现

//反正CSS3中的border-radius属性IE8是不支持了，所以这里就用新方法吧getElementsByClassName()走起

window.onload = function(){

var circleBar = document.getElementsByClassName('circle-bar')[0];

var percent = parseInt(circleBar.getElementsByClassName('percent')[0].firstChild.nodeValue);

var color = circleBar.css('background-color');

var left_circle = circleBar.getElementsByClassName('circle-bar-left')[0];

var right_circle = circleBar.getElementsByClassName('circle-bar-right')[0];

if( percent <= 50 ) {

var rotate = 'rotate('+(percent*3.6)+'deg)';

right_circle.css3('transform',rotate);

}else {

var rotate = 'rotate('+((percent-50)*3.6)+'deg)';

right_circle.css ('background-color',color);//背景色设置为进度条的颜色

right_circle.css3('transform','rotate(0deg)');//右侧不旋转

left_circle.css3 ('transform',rotate);//左侧旋转

}

}

//封装了css3函数，主要是懒得重复书写代码，既然写了css3函数，顺便写个css吧，统一样式，好看一些

Element.prototype.css = function(property,value){

if ( value ) {

//CSS中像background-color这样的属性，‘-’在JavaScript中不兼容，需要设置成驼峰格式

var index = property.indexOf('-');

if( index != -1 ) {

var char = property.charAt(index+1).toUpperCase();

property.replace(/(-*){1}/,char);

}

this.style[property] = value;

}else{

//getPropertyValue()方法参数类似background-color写法，所以不要转驼峰格式

return window.getComputedStyle(this).getPropertyValue(property);

}

}

//封装一个css3函数，用来快速设置css3属性

Element.prototype.css3 = function(property,value){

if( value ){

property = capitalize(property.toLowerCase());

this.style['webkit'+property] = value;

this.style['Moz'+property] = value;

this.style['ms'+property] = value;

this.style['O'+property] = value;

this.style[property.toLowerCase()] = value;

}else{

return window.getComputedStyle(this).getPropertyValue(

('webkit'+property)||('Moz'+property)||('ms'+property)||('O'+property)||property);

//老实说，我不知道为什么要把不带浏览器标记的放在最后，既然都这么用，我也这么做吧。不过这样对现代浏览器来说可能并不好，判断次数变多了

}

//首字母大写

function capitalize(word){

return word.charAt(0).toUpperCase() + word.slice(1);

}

}

jQuery实现

$(function(){

var percent = parseInt($('.mask :first-child').text());

var baseColor = $('.circle-bar').css('background-color');

if( percent<=50 ){

$('.circle-bar-right').css('transform','rotate('+(percent*3.6)+'deg)');

}else {

$('.circle-bar-right').css({

'transform':'rotate(0deg)',

'background-color':baseColor

});

$('.circle-bar-left').css('transform','rotate('+((percent-50)*3.6)+'deg)');

}

})

jQuery这么简单好用，为什么还要写JavaScript？

一来，学习JavaScript的使用，毕竟有些方法可能是不太熟悉的，多查查文档，混个眼熟。

二来，万一项目中不需要使用jQuery呢，以后还得实现。

三、总结体会

在规定圆的大小的时候，使用了font-size属性，而长度大小则基于font-size，也就是em为单位，这样有一个好处，只要修改font-size的值，就可以改变圆的大小了，非常方便。

另外，写css的时候，尽可能将相同功能的代码提取出来，将某个功能写在一个{}中，起一个好名字，以后方便复用，bootstrap就是这么玩的，简洁、易读，通过classname基本就能知道标签有哪些特性了。

利用css3动画和border来实现圆形进度条

最近在学习前端的一些知识,发现border的功能十分强大啊! 首先来看看demo 就是这么一个圆形的进度条,在文本框中输入0-100的数值下面的进度条相应的转到多少 这个主要是利用border,旋转和 ...

移动端纯CSS3制作圆形进度条所遇到的问题

近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...

canvas圆形进度条

通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 & ...

简单实用的纯CSS百分比圆形进度条插件

percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

jquery 圆形进度条

最近手里面的项目需要完成这个对设备性能的检测显示功能,需要使用到圆形进度条这样的效果,网上找了一圈,有很多相当的插件,找到:circliful 插件,看了他的使用说明比较的方便,于是就下载了它并将自己 ...

Highcharts 测量图；Highcharts 圆形进度条式测量图；Highcharts 时钟；Highcharts 双轴车速表；Highcharts 音量表(VU Meter)

Highcharts 测量图 配置 chart.type 配置 配置 chart 的 type 为 'gauge' .chart.type 描述了图表类型.默认值为 "line". ...

微信小程序动画之圆形进度条

微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...

JS框架&lowbar;&lpar;JQbar&period;js&rpar;柱状图动态百分比进度条特效

百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果

jqbar.js柱状图动态百分比进度条特效

vue 圆形进度条组件解析

项目简介 本组件是vue下的圆形进度条动画组件 自由可定制,几乎全部参数均可设置 源码简单清晰 面向人群 急于使用vue圆形进度条动画组件的同学.直接下载文件,拷贝代码即可运行. 喜欢看源码,希望了解 ...

随机推荐

C&num;打开一个文本文件并读写

OpenFileDialog OFD = new OpenFileDialog(); OFD.Title = "打开第一个文本文件"; OFD.FileName = "* ...

Datediff函数 助你实现不同进制时间之间的运算

在VB开发环境中实现时间之间的加减运算有很多种方法,前不久自己无意中发现了Datediff函数,它能够比较简单.全面地实现我们比较常用的时间之间的运算,今由自己的研究,搞清了它的一些用法,拿来和大家分 ...

ANDROID 中UID与PID的作用与区别

PID:为Process Identifier, PID就是各进程的身份标识,程序一运行系统就会自动分配给进程一个独一无二的PID.进程中止后PID被系统回收,可能会被继续分配给新运行的程序,但是在a ...

es 6点滴记录

关于babel和webpack的使用: Babel 所做的只是帮你把'ES6 模块化语法'转化为'CommonJS 模块化语法',其中的require exports 等是 CommonJS 在具体实 ...

angular4升级angular5问题记录之this&period;location&period;back&lpar;&rpar;

在之前的项目中,导航回上一个路由采用注入的Location服务,利用浏览器的历史堆栈,导航到上一步. 官方文档也就是这么写的 而然在升级到5.2的版本的时候,在浏览器运行的时候并没有什么问题,在项目打 ...

用canal同步binlog到kafka，spark streaming消费kafka topic乱码问题

canal 1.1.1版本之后, 默认支持将canal server接收到的binlog数据直接投递到MQ, 目前默认支持的MQ系统有kafka和RocketMQ. 在投递的时候我们使用的是非压平的消 ...

重新配置dbconsole的步骤

重新配置dbconsole的步骤emca -repos dropemca -repos createemca -config dbcontrol dbemctl start dbconsole

java-javaweb&lowbar;URL重写

Java WEB实现URL重写的优缺点及如何实现: http://blog.csdn.net/cselmu9/article/details/8062033 urlrewrite 地址重写: http ...

Android getevent用法详解

getevent 指令用于获取 input 输入事件,比如获取按键上报信息.获取触摸屏上报信息等. 指令源码路径:/system/core/toolbox/getevent.c getevent -h ...