网站首页 » 前端开发 » CSS3 » CSS3 创建圆形进度条
上一篇:
下一篇:

CSS3 创建圆形进度条

前言

对于现如今越来越讲效率的互联网时代来说进度至关重要,而反应进度的进度条也就理所当然的成了主角,那么现在问题来了,这个进度条在前端中我们要怎么用代码画出来呢?不过在本文中我们只对圆进度条进行分析,因为直线式进度条比较简单。

SVG 实现

基本实现

基本 CSS 样式

*{
    padding: 0;
    margin: 0;
}
.container{
    width:130px;
    height:130px;
    margin:0 auto;
}

HTML 代码

<div class="container">
  <svg id="progress-box" width="130" height="130" xmlns="http://www.w3.org/2000/svg">
    <circle id="progress-runner" r="55" cy="65" cx="65" stroke-width="15" stroke="#2f9be9" fill="none"/>
  </svg>
</div> 

例子演示地址:http://yunkus.com/demo/round-progress-bar/index-1.html

上面我们使用 svg 简单的画了一个镂空的圆,如果只是要一个这样的圆,实现的方法也有很多,比如:border+border-radius、两个圆堆叠实现。但是现在我们要做的是一个圆形的进度条,所以接下来我们就在上面的基础上实现我们想要的进度条。

思路:

1.首先进度条是有一个浅色圆形背景作为进度条的运行的轨迹,一个表示当前进度的深色进度的圆形进度条。所以我们要两个这样的圆圈。

2.圆圈有了,那么怎么让深色的圆圈来反应我们的当前进度(比如:80%)?

要想画出两个重叠的圆圈也非常地简单:

<div class="container">
  <svg id="progress-box" width="130" height="130" xmlns="http://www.w3.org/2000/svg">
    <circle id="progress-trace" r="55" cy="65" cx="65" stroke-width="15" stroke="#eee" fill="none"/>
    <circle id="progress-runner" r="55" cy="65" cx="65" stroke-width="15" stroke="#2f9be9" fill="none"/>
  </svg>
</div>

例子演示地址:http://yunkus.com/demo/round-progress-bar/index-2.html

现在问题来了,怎么通过这个深色圆来表示进度呢?

通过一个数学公式(Circumstance =2*PI*Radius)先算出我们刚才画出来的圆的周长:2×55*3.14 = 345.4。要想实现这个功能,我们还得先多认识 svg 标签的两个属性:stroke-dasharray 和 stroke-dashoffset。

授课时间:

stroke-dasharray:可以用来创造虚线

stroke-dashoffset:指定虚线的起始偏移距离

好了现在我们来做一个有点像样的圆形进度条,给 progress-runner 添加如下样式:

#progress-runner{
    stroke-dashoffset:45.4;
    stroke-dasharray:346
}

例子演示地址:http://yunkus.com/demo/round-progress-bar/index-3.html

上面的 stroke-dasharray:345.4 的值就是我们算出来的圆的周长,而我们要实现进度条的效果就还得通过它的兄弟 stroke-dashoffset 来帮忙。你可以随便给 stroke-dashoffset 一个值来看看效果。相信细心的你会发现当 stroke-dashoffset 越大时深色进度条就越短,而当 stroke-dashoffset 与 stroke-dasharray 相等时深色进度条的长度刚好为零(其实不是真的为零,只是 stroke-dashoffset 在搞鬼)。但是不管怎么样,这个进度条的效果基本已经成形。现在我们来继续优化它,让它变得更加易用,更加高大上。

接下来我们还需要解决的问题:

优化

1. stroke-dashoffset 值越大表示的进度反而越小的问题,也就是把它改成正相关。

2.动态控制进度条。

3.要变得高大上。

我们先来解决问题一:

要解决这个问题方法也好简单,你只需要把上面两个圆的边色互换就可以了。代码如下:

<div class="container">
  <svg id="progress-box" width="130" height="130" xmlns="http://www.w3.org/2000/svg">
    <circle id="progress-trace" r="55" cy="65" cx="65" stroke-width="15" stroke="#2f9be9" fill="none"/>
    <circle id="progress-runner" r="55" cy="65" cx="65" stroke-width="15" stroke="#ddd" fill="none"/>
  </svg>
</div>

例子演示地址:http://yunkus.com/demo/round-progress-bar/index-4.html

那么当你从后台拿到这个百分比数据时要怎么把这个数用这个进度条来实现显示呢?下面是一个简单的有点动感的实现方法。

var oSvgCircle = document.getElementById("progress-runner");
var num = 0;
var timer = null;
timer = setInterval(function() {
    num = num + 1 ;
    oSvgCircle.style.strokeDashoffset = num;
    if(num > 345){ // 这里的 345 可以改成一个从 0 到 345 的值,345 代表 100%
        clearInterval(timer);
        console.log(num); // num = 346
    }
},10);

例子演示地址:http://yunkus.com/demo/round-progress-bar/index-5.html

上面的代码估计你应该也已经看懂了。如果不想要这个动态的效果可以直接这样设置:

oSvgCircle.style.strokeDashoffset = num;

一样的结果,num 就是后台传过来的百分比数乘以 346 就会得到 strokeDashoffset 的值。不过到这里还没完,一般情况下我们进度条都是从12点方向开始的,所以我们在这里也得设置下。我们只需要把逆时针旋转90度就好,还有你会看到这个圆形内外边缘都带有蓝色的锯齿,要想解决这个问题,你只需要修改下 progress-trace 的 stroke-width=”14″ 就可以了。

#progress-box{
    -webkit-transform:rotate(-90deg);
    transform:rotate(-90deg);
}

例子演示地址:http://yunkus.com/demo/round-progress-bar/index-6.html

如果你就是想与从不同,让进度条从其它位置开始也是可以了,修改上面样式中的角度值就可以了。

到这里一个可用于实际项目中的圆形进度条就诞生了!

渐变进度条

要想做一个圆形的渐变进度条也不是什么难事。但是在做之前我们需要准备一个工具: SVG 生成器。你可以下载一个软件或者直接在线编辑都可以。只要能生成一个渐变的 SVG 代码就 OK。

这里有一个在线的 SGV 工具:http://editor.method.ac/,像这样的工具也非常多自己可以在网上搜索下。通过这个工具你可以生成一段类似这样的代码:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <defs>
  <linearGradient y2="0" x2="1" y1="0" x1="0" id="svg_10">
   <stop offset="0" stop-opacity="0.992188" stop-color="#008cdc"/>
   <stop stop-opacity="0.996094" offset="1" stop-color="#00dedb"/>
  </linearGradient>
 </defs>
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <rect id="svg_11" height="224" width="531" y="86.5" x="24" stroke-opacity="null" stroke-width="1.5" stroke="#A0D58A" fill="url(#svg_10)"/>
 </g>
</svg>

但我们只需要里面的一小段代码:

<defs>
  <linearGradient y2="0" x2="1" y1="0" x1="0" id="svg_10">
   <stop offset="0" stop-opacity="0.992188" stop-color="#008cdc"/>
   <stop stop-opacity="0.996094" offset="1" stop-color="#00dedb"/>
  </linearGradient>
 </defs>

把这一小段代码整合到我们之前做好的 DEMO 就可以了:

<div class="container">
    <svg id="progress-box" width="130" height="130" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient y2="0" x2="1" y1="0" x1="0" id="svg_10">
                <stop offset="0" stop-opacity="0.992188" stop-color="#008cdc" />
                <stop stop-opacity="0.996094" offset="1" stop-color="#00dedb" />
            </linearGradient>
        </defs>
        <g>
            <circle id="progress-trace" r="55" cy="65" cx="65" stroke-width="14" stroke="url(#svg_10)" fill="none" />
            <circle id="progress-runner" r="55" cy="65" cx="65" stroke-width="15" stroke="#eee" fill="none" />
        </g>
    </svg>
</div>

其它代码不用变。具体效果可以看DEMO:http://yunkus.com/demo/round-progress-bar/index-7.html

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/round-progress-bar/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END