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

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

最近项目里遇到一个有意思的效果,那就是圆形进度条,类似于这样的:

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

demo1demo2

实现类似这样的效果方法很多。我主要想了2个解决方案,都是通过jQuery和CSS实现的,下面就一一道来:

方法一:jQuery + CSS3

实现原理

原理非常的简单,在这个方案中,最主要使用了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的部分是为了遮挡外面的容器,致使在视觉上产生圆环的效果:

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

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

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

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

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

整环的实现

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

HTML

<div class="circle">
    <div class="pie_left"><div cla
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css3/create-radial-progress-bar-with-jQuery-and-css3.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部