你不知道的前端让前端飞思科DevNet

教你如何制作圆形进度条

2016-10-26  本文已影响126人  lMadman

常用的进度条有两种,一种是条行的,另一种是比较形象的圆形进度条。
圆形进度条的用处也比较多,插件也不少,但是想要在别人的插件中实现一些自定义的东西,还是比较有难度的。

比如:我想让进度可以实现不止100%,超过100%还显示100%的状态,如这样

Paste_Image.png

又或者,我想圆形进度条的中间不止显示100%,还有一些别的内容,迫于这两个因素,今天我学到了一种自定义圆形进度条的制作方法,在此分享给大家。

<div class="circle" style="left:0">
        <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>
    <div class="circle" style="left:220px">
        <div class="pie_left"><div class="left"></div></div>
        <div class="pie_right"><div class="right"></div></div>
        <div class="mask"><span>15</span>%</div>
    </div>
    <div class="circle" style="left:440px">
        <div class="pie_left"><div class="left"></div></div>
        <div class="pie_right"><div class="right"></div></div>
        <div class="mask"><span>30</span>%</div>
    </div>
    <div class="circle" style="left:660px">
        <div class="pie_left"><div class="left"></div></div>
        <div class="pie_right"><div class="right"></div></div>
        <div class="mask"><span>60</span>%</div>
    </div>
    <div class="circle" style="left:880px">
        <div class="pie_left"><div class="left"></div></div>
        <div class="pie_right"><div class="right"></div></div>
        <div class="mask"><span>90</span>%</div>
    </div>
body {
        font-family: "微软雅黑";
        }
        .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 {
            width:200px; 
            height:200px;
            background:#00aacc;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .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: 20px;
            font-weight: bold;
            color: #00aacc;
        }
$(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)");
                };
            });

        });

通过上面的代码,就可以实现简单圆形进度条,效果如下:

Paste_Image.png

最后,给大家看一下实战项目中的样子:

Paste_Image.png Paste_Image.png
上一篇下一篇

猜你喜欢

热点阅读