文档章节

利用jQuery和CSS实现环形进度条

持枪的绅士
 持枪的绅士
发布于 2016/06/02 19:02
字数 728
阅读 43
收藏 1

那么,如何实现如图所示的环形进度条呢?

输入图片说明

实现原理

原理非常的简单,在这个方案中,最主要使用了CSS3的transform中的rotate和CSS3的clip两个属性。用他们来实现半圆和旋转效果。

半环的实现

先来看其结构。

HTML

<div class="pie_right">
    <div class="right"></div>
    <div class="mask"><span>0</span>%</div>
</div>

CSS

.pie_right {
    width:200px; 
    height:200px;
    position: absolute;
    top: 0;
    left: 0;
    background:#0cc;
}
.right {
    width:200px; 
    height:200px;
    background:#00aacc;
    border-radius: 50%;
    position: absolute;  
    top: 0;
    left: 0;
}
.pie_right, .right {
    clip:rect(0,auto,auto,100px);
}
.mask {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    left: 25px;
    top: 25px;      
    background: #FFF;
    position: absolute;
    text-align: center;
    line-height: 150px;
    font-size: 20px;
    background: #0cc;
    /* mask 是不需要剪切的,此处只是为了让大家看到效果*/
    clip:rect(0,auto,auto,75px); }

实现半圆还是挺简单的,利用border-radius做出圆角,然后利用clip做出剪切效果,(clip使用方法,详见站内介绍),mask的部分是为了遮挡外面的容器,致使在视觉上产生圆环的效果:

输入图片说明

旋转的话,那更容易实现了,就是在CSS的right中加入(我没做浏览器兼容代码,请大家自行加入):

.right {
    transform: rotate(30deg);
}

输入图片说明

这样就可以看到一个半弧旋转的效果了。

整环的实现

同样道理,拼接左半边圆环,为了让我们html结构更易懂以后写js更简便,我对结构做了一下改造,并作了效果优化:

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(30deg);
}
.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;
}

效果如下:

输入图片说明

圆环最终效果

Ok了,基本上我们的圆环已经实现完成了,下面是加入JS效果。

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

那么,原理明确之后,其jQuery代码如下(删除CSS中的旋转效果,在JS里重写):

$(function() {
    $('.circle').each(function(index, el) {
        var num = $(this).find('span').text() * 3.6;
        if (num<=180) {
            $(this).find('.right').css('transform', "rotate(" + num + "deg)");
        } else {
            $(this).find('.right').css('transform', "rotate(180deg)");
            $(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
        };
    });

});

改变mask里面的span 的数值,我们就会看到最终效果。

输入图片说明

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

本文转载自:http://www.w3cplus.com/css3/create-radial-progress-bar-with-jQuery-and-css3.html

持枪的绅士
粉丝 7
博文 10
码字总数 6993
作品 0
嘉兴
私信 提问
HTML5/CSS3超酷进度条 不同进度多种颜色

下面我们来看看实现这款进度条的过程和源码,代码主要由HTML、CSS以及jQuery组成,实现过程也相对比较简单。 HTML代码: <div id="wrapper"> <div class="loader-container"> <div class="me......

Reya滴水心
2015/07/15
293
0
6款新颖的jQuery和CSS3进度条插件

现在的网页功能越来越多,尤其是AJAX的广泛应用,进度条和Loading加载动画显得越来越重要了。下面给大家介绍几款比较新颖的jQuery和CSS3进度条Loading加载动画插件,希望对大家有帮助。 1、不...

ruby_chen
2013/03/05
47
0
2016 年 11 月最好的 jQuery 插件

1. Gradientify Gradientify 是一个简单的 jQuery 插件,它提供了 CSS 梯度过渡效果。 2. PrognRoll PrognRoll 是一个微小的 jQuery 插件,用于在页面上创建滚动进度条。 您还可以自定义进度...

pe_mail2006
2016/11/17
6.2K
6
20+功能强大的jQuery/CSS3图片特效插件

以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3。 1、jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有弹跳...

ruby_chen
2013/10/14
24.7K
5
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.6K
9

没有更多内容

加载失败,请刷新页面

加载更多

java发送html模板的高逼格邮件

最近做了一个监测k8s服务pod水平伸缩发送邮件的功能(当pod的cpu/内存达到指定阈值后会水平扩展出多个pod、或者指定时间内pod数应扩展到指定数量),一开始写了个格式很low的邮件,像下面这样...

码农实战
11分钟前
4
0
php-fpm配置文件详解/MariaDB密码重置、慢查询日志

来源:https://blog.csdn.net/Powerful_Fy php-fpm主配置文件路径:/usr/local/php-fpm/etc/php-fpm.conf #位于安装php安装目录下的etc/目录中,该文件中最后一行将配置文件指向:include=/...

asnfuy
16分钟前
3
0
川普给埃尔多安和内堪尼亚胡的信

任性 https://twitter.com/netanyahu/status/1186647558401253377 https://edition.cnn.com/2019/10/16/politics/trump-erdogan-letter/index.htm...

Iridium
37分钟前
12
0
golang-mysql-原生

db.go package mainimport ("database/sql""time"_ "github.com/go-sql-driver/mysql")var (db *sql.DBdsn = "root:123456@tcp(127.0.0.1:3306)/test?charset=u......

李琼涛
今天
5
0
编程作业20191021092341

1编写一个程序,把用分钟表示的时间转换成用小时和分钟表示的时 间。使用#define或const创建一个表示60的符号常量或const变量。通过while 循环让用户重复输入值,直到用户输入小于或等于0的值...

1李嘉焘1
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部