codetc - 网站开发技术 首页 前端 查看内容

使用jQuery和CSS3实现环形进度条

2015-10-8 17:10| 发布者: CODETC| 查看: 2679| 评论: 0

使用jQuery和CSS3实现环形进度条效果或倒计时效果;其实实现原理非常的简单,在这个方案中,最主要使用了CSS3的transform中的rotate和CSS3的clip两个属性。用他们来实现半圆和旋转效果。



通过左右半圆的组合和旋转配合JQuery,从而实现环形进度效果,这种效果除了用作表示进度外还可以用于倒计时。


HTML代码:
<div class="circle">
    <div class="pie_left"><div class="left"></div></div>
    <div class="pie_right"><div class="right"></div></div>
    <div class="mask"><span>0</span>%</div>
</div>

CSS代码:
.circle {
    width: 200px;
    height: 200px;  
    position: absolute;
    border-radius: 50%;
    background: #0cc;
}
.pie_left, .pie_right {
    width: 200px; 
    height: 200px;
    position: absolute;
    top: 0;left: 0;
}
.left, .right {
    display: block;
    width:200px; 
    height:200px;
    background:#00aacc;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(0deg);
}
.pie_right, .right {
    clip:rect(0,auto,auto,100px);
}
.pie_left, .left {
    clip:rect(0,100px,auto,0);
}
.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;
}

JS代码:
$(function() {
	var num = $('.mask span').text() * 3.6;
	if (num<=180) {
		$('.right').css('transform', "rotate(" + num + "deg)");
	} else {
		$('.right').css('transform', "rotate(180deg)");
		$('.left').css('transform', "rotate(" + (num - 180) + "deg)");
	};
});

首先,我们需要考虑的是,圆环的转动幅度大小,是由圆环里面数字的百分比决定的,从0%-100%,那么圆弧被分成了每份3.6°;而在180°,也就是50%进度之前,左侧的半弧是不动的,当超过50%,左边的半弧才会有转动显示。


这样我们只要从后台获取当前流程的进度值,传给span,那么我们页面上就能看到这样圆环的进度效果啦。


动态实现请下载附件中的源码,实现中使用了setInterval来模拟了进度表现。


点击下载:使用jQuery和CSS3实现环形进度条效果
文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-252-1.html

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部