利用 clip-path 实现环形进度条

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用 clip-path 实现环形进度条相关的知识,希望对你有一定的参考价值。

参考技术A

  昨天逛网页时看到有用css与js实现环形进度条的(那位博主在面试时被要求当场写出环形进度条π_π),然后就想尝试下写出来(感觉好尴尬),说实话春节后遗症真可怕 haha~

  看了网上的 三种方法 实现方式如下:

  两个clip过的半圆,边框设置颜色,左侧的用来旋转,右侧的固定不动(width:0px;),当进度到达50%时, 右侧的半圆显示出来(同时左半圆和右半圆的父元素div覆盖最外层的div),左侧的半圆继续旋转 。
  可能我没说清楚,原文链接: http://blog.csdn.net/angeljsl/article/details/51208960

  使用SVGstroke-dasharray寥寥数行实现圆环loading进度效果,原文链接: http://www.zhangxinxu.com/wordpress/?p=4889

  利用path元素,使用path指令绘制扇形,原文链接: http://www.tuicool.com/articles/e2UzuaQ

  常用的path指令:

两个介绍 SVG比较详细的网址
   http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html
   http://www.mb5u.com/HTML5/html5_96413.html

  核心就是使用-webkit-clip-path:polygon();切割div,border-radius:50%;画出圆弧

实现环形进度条的几种方法

环形进度条的问题,网上有很多的demo,也有各种不同的实现方式,很棒的实现也有很多,我这自己做一下一方面是想开阔一下自己的思路,一方面好久没看SVG和Canvas的东西了,基础的拿来熟悉下。

DIV + CSS3

这个是最基本的实现方式,我在想怎样用尽量少的DOM结构来实现,最终还是用了三个div,不过这个方法仅供开阔思路,样式表现在PC还好,手机上的问题就多了,仅供参考。

  • 1、利用div的border画一个背景的圆环

    <div class="demo1-bg1"></div>
    /* css */
    .demo1-bg1{
        width: 100px;
        height: 100px;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        margin: 50px auto;
        background: fff;
        border-radius: 50%;
        box-shadow: 0 0 0 10px red inset;
    }

技术图片

  • 2、添加两个子元素div,分别设置border来实现两个半圆环并遮盖背景圆环

    <div class="demo1-bg1">
        <div id="J_bg2_1" class="demo1-bg2-1"></div>
        <div id="J_bg2_2" class="demo1-bg2-2"></div>
    </div>
    /* css */
    .demo1-bg2-1,.demo1-bg2-2{
        position: relative;
        margin: 0;
        padding: 0;
        -webkit-box-flex: 1;
        height: 80px;
        background: #fff;
        border: 10px solid grey;
    }
    .demo1-bg2-1{
        border-radius: 50px 0 0 50px;
        border-color: grey transparent grey grey;
        transform-origin: 100% 50%;
        z-index: 1;
    }
    .demo1-bg2-2{
        border-radius: 0 50px 50px 0;
        border-color: grey grey grey transparent;
        transform-origin: 0 50%;
        z-index: 2;
    }

技术图片 --> 技术图片 --> 技术图片

  • 3、用JS旋转两个子元素,露出背景圆环

技术图片

DIV + CSS3 实现圆环进度条

SVG

这个原理也很简单,是利用SVG的stroke和dash-array属性来实现,也是我常用的实现方式。

  • 绘制一个圆环路径,填充灰色圆环

<svg xmlns="http://www.w3.org/200/svg" height="150" width="110">
    <circle cx="55" cy="55" r="50" fill="none" stroke="grey" stroke-width="5" stroke-linecap="round"/>
</svg>

技术图片

  • 绘制一个内圆环,半径/圆心和外圆环一样,刚好重叠

<circle class="demo2" id="J_progress_bar" cx="55" cy="55" r="50" fill="none" stroke="red" stroke-width="5"/>

技术图片

  • 设置内圆环的stroke-dasharray属性,stroke-dasharray的值得意思是,第一个值为圆环第一段填充颜色的长度,第二个值为圆环接下来不填充颜色的长度,以此类推并重复。这里设置为:stroke-dasharray="0,10000" 第一个值就是填充红色的值,为0,第二段为不填充的长度,超过圆环的周长即可。此时进度条为0%:
    技术图片

这时候发现stroke-dasharray填充是从3点钟位置开始的,所以就让内圆环旋转-90度:

.demo2{
    transform-origin: center;
    transform: rotate(-90deg);
}

技术图片

  • JS控制内圆环的stroke-dasharray的值来控制内圆环第一段绘制红色的长度

var demo2 =  document.querySelector("#J_demo2");
var btn1 = document.querySelector("#J_btn_1");
var btn2 = document.querySelector("#J_btn_2");

var circleLength = Math.floor(2 * Math.PI * demo2.getAttribute("r"));

window.onload = rotateCircle;

btn2.onclick = rotateCircle;
function rotateCircle () {
    var val = parseFloat(btn1.value).toFixed(2);
    val = Math.max(0,val);
    val = Math.min(100,val);
    demo2.setAttribute("stroke-dasharray","" + circleLength * val / 100 + ",10000");
}

SVG 实现圆环进度条

以上是关于利用 clip-path 实现环形进度条的主要内容,如果未能解决你的问题,请参考以下文章

怎样用div实现带百分百环形进度条

实现环形进度条的几种方法

echarts实现环形进度条

echarts实现环形进度条

echarts实现环形进度条

iOS圆环,环形渐变进度条的封装