使用 css3 实现圆形进度条的示例


Posted in HTML / CSS onJuly 05, 2017

在开发微信小程序的时候,遇到圆形进度条的需求。使用canvas绘图比较麻烦:

1、为了实现在不同屏幕上面的适配,必须动态的计算进度条的大小;

2、在小程序中,canvas的画布具有最高的层级,不易于扩展。

但使用css3和js实现进度条就很容易的避免了这方面的问题。

注:这篇文章里面使用jquery实现,但原理是一样的,在小程序中只要定义并改变相应的变量就行了

一、进度条样式的样式

在平时的开发中,经常使用元素的border来显示圆形图案,在使用css3实现圆形进度条时,同样也是使用这个技巧。为了实现上面的圆形边框,动态的覆盖下面圆形边框,总共需要一个圆形,2个长方形和2个半圆形:一个圆形用来显示底层背景,两个半圆形用来覆盖底层背景显示进度,另外两个长方形用来覆盖不需要显示的进度。如下图:

使用 css3 实现圆形进度条的示例

最下面的bottom圆形是进度条的背景,在bottom上面有left和right两个长方形,用来覆盖不要显示的进度条。在两个长方形的里面分别有一个半圆形用来显示进度。正常情况下,使用正方形绘制出来的半圆,直径和水平下都是有45度夹角的。为了能使两个半圆刚好可以覆盖整个圆形,就需要使用css3中的rotate使原有正方形旋转,达到覆盖整个背景的效果。如下图(为了显示清楚,这里用正方形表示):

使用 css3 实现圆形进度条的示例

如图,将长方形内部的半圆向右(顺时针)旋转45度,就可以得到进度覆盖整个背景的图像。将半圆向左(逆时针)旋转135度就能得到只有进度条背景的图像。为什么又要向左旋转,而不是一直向右旋转,当然是因为要实现的效果是:进度是从顶部开始,顺时走完的。到这里,思路就很清晰了,只需要再按百分比的多少来控制左边和右边进度的显示就可以了。

实现这部分的html和css代码如下:

html代码

<div class="progressbar">
    <div class="left-container">
        <div class="left-circle"></div>
    </div>
    <div class="right-container">
        <div class="right-circle"></div>
    </div>
</div>

css代码:

.progressbar{
    position: relative;
    margin: 100px auto;
    width: 100px;
    height: 100px;
    border: 20px solid #ccc;
    border-radius: 50%;
}
.left-container,.right-container{
    position: absolute;
    width: 70px;
    height: 140px;
    top:-20px;
    overflow: hidden;
    z-index: 1;
}
.left-container{
    left: -20px;
}
.right-container{
    right: -20px;
}
.left-circle,.right-circle{
    position: absolute;
    top:0;
    width: 100px;
    height: 100px;
    border:20px solid transparent;   
    border-radius: 50%;
    transform: rotate(-135deg);
    transition: all .5s linear;
    z-index: 2;
}
.left-circle{
    left: 0;
    border-top-color: 20px solid blue;
    border-left-color: 20px solid blue;
}
.right-circle{
    border-right-color: 20px solid blue;
    border-bottom-color: 20px solid blue;
    right: 0;
}

二:控制进度条的js

为了使进度条的逻辑更健壮,js部分的实现需要考虑四中情况:

1、基础值个更改后的值在同在右边进度,

2、基础值在右边,更改后的值在左边,

3、基础值更改后的值同在左边,

4、基础值在左边,更改后的值在右边。

不管在那种情况下,核心需要考虑只有两点:角度的变化和使用时间的多少。

第一种情况下,比较简单,可以很简单计算出角度的变化和使用时间的多少。首先,需要设定改变整个半圆的所需的时间值。设定之后,只要根据比例计算出改变的角度所需要的时间值即刻。代码如下:

time = (curPercent - oldPercent)/50 * baseTime;
     //确定时间值为正
     curPercent - oldPercent > 0 ? '' : time = - time;
     deg = curPercent/50*180-135;

第二种情况,稍微麻烦一点。因为中间有一个从右边进度,到左边进度的过渡。为了让进度顺畅的改变,这里我们需要使用定时器,在改变完右边的部分之后,再修改左边的部分。代码如下:

//设置右边的进度
  time = (50 - oldPercent)/50 * baseTime;
deg = (50 - oldPercent)/50*180-135;
$rightBar .css({
    transform: 'rotate('+ deg+ 'deg)',
    transition : 'all '+ time + 's linear'
})
//延时设置左边进度条的改变
setTimeout(function(){
    time = (curPercent - 50)/50;
    deg = (curPercent - 50)/50*180 -135;

    $leftBar.css({
        transform: 'rotate('+ deg+ 'deg)',
        transition : 'all '+ time + 's linear'
    })
}, Math.floor(time*1000));000));

第三种情况和第四种情况同前面情况类似,这里不再讨论。

完整的控制进度条的函数的代码如下(使用jQuery实现):

/**
    *设置进度条的变化
    *@param {number} oldPercent    进度条改变之前的半分比
    *@param {number} curPercent    进度条当前要设置的值 
    *@return {boolean} 设置成功返回 true,否则,返回fasle
    */
    function setProgessbar(oldPercent, curPercent){
        var $leftBar = $('#left-bar');
        var $rightBar = $('#right-bar');
        //将传入的参数转换,允许字符串表示的数字
        oldPercent =  + oldPercent;
        curPercent =  + curPercent;
        //检测参数,如果不是number类型或不在0-100,则不执行
        if(typeof oldPercent ==='number' && typeof curPercent ==='number'
            && oldPercent >= 0 && oldPercent <= 100 && curPercent <= 100 && curPercent >= 0){
    
            var baseTime = 1;    //默认改变半圆进度的时间,单位秒   
            var time = 0;    //进度条改变的时间
            var deg = 0;     //进度条改变的角度
            if(oldPercent > 50){//原来进度大于50
                if(curPercent>50){
                    //设置左边的进度
                    time = (curPercent - oldPercent)/50 * baseTime;
                    //确定时间值为正
                    curPercent - oldPercent > 0 ? '' : time = - time;
                    deg = curPercent/50*180-135;
                    $leftBar .css({
                        transform: 'rotate('+ deg+ 'deg)',
                        transition : 'all '+ time + 's linear'
                    })
    
                }else{
                    //设置左边的进度
                    time = (oldPercent - 50)/50 * baseTime;
                    deg = (oldPercent - 50)/50*180-135;
                    $leftBar .css({
                        transform: 'rotate('+ deg+ 'deg)',
                        transition : 'all '+ time + 's linear'
                    })
                    //延时设置右边进度条的改变
                    setTimeout(function(){
                        time = (50 - curPercent)/50;
                        deg = (50 - curPercent)/50*180 -135;
                        $rightBar.css({
                            transform: 'rotate('+ deg+ 'deg)',
                            transition : 'all '+ time + 's linear'
                        })
                    }, Math.floor(time*1000));
                }
            }else{//原来进度小于50时
    
                if(curPercent>50){
                    //设置右边的进度
                    time = (50 - oldPercent)/50 * baseTime;
                    deg = (50 - oldPercent)/50*180-135;
                    $rightBar .css({
                        transform: 'rotate('+ deg+ 'deg)',
                        transition : 'all '+ time + 's linear'
                    })
                    //延时设置左边进度条的改变
                    setTimeout(function(){
                        time = (curPercent - 50)/50;
                        deg = (curPercent - 50)/50*180 -135;
    
                        $leftBar.css({
                            transform: 'rotate('+ deg+ 'deg)',
                            transition : 'all '+ time + 's linear'
                        })
                    }, Math.floor(time*1000));
                }else{
                    //设置右边的进度
                    time = (curPercent - oldPercent)/50 * baseTime;
                    //确定时间值为正
                    curPercent - oldPercent > 0 ? '' : time = - time;
                    deg = curPercent/50*180-135;
                    $rightBar .css({
                        transform: 'rotate('+ deg+ 'deg)',
                        transition : 'all '+ time + 's linear'
                    })
    
                }
                return true;
            }
        }else{
            return false;
        }
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
手把手教你用纯css3实现轮播图效果实例
May 04 HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
css3学习系列之移动属性详解
Jul 04 #HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 #HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 #HTML / CSS
利用css3画个同心圆示例代码
Jul 03 #HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 #HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 #HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 #HTML / CSS
You might like
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP实现百度人脸识别
2019/05/06 PHP
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python中类的初始化特殊方法
2017/12/01 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
大学生年度自我鉴定
2013/10/31 职场文书
会计自我鉴定
2013/11/02 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
光荣之路观后感
2015/06/12 职场文书
如何写好活动总结
2019/06/21 职场文书
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers