circleProgress 插件环形进度条

circleProgress 插件环形进度条

效果图

 "clue-hd-right">"javascript:;" class="btnw">数据分析"redate-box">"tip">正在分析中"circle-box">"ring">"circle">"javascript:void(0)" class="ckfx-btn">查看分析

.clue-hd-right{.btnw {border: 1px solid #e2e2e2;border-radius: 3px;line-height: 30px;display: inline-block;padding: 0 10px;background: -webkit-linear-gradient(#fff, #f8f8f8);background: linear-gradient(#fff, #f8f8f8);}.ckfx-btn{height: 30px;border-radius:3px;line-height: 30px;padding:0 10px;border: 1px solid #1577f0;color: #1577f0;&:hover{color: #1577f0;}display: inline-block;}.redate-box {display: none;.tip {color: #f87875;border: 1px solid #f87875;background: #feefea;border-radius: 12px;padding: 0 10px;line-height: 22px;display: inline-block;font-size: 12px;position: relative;}.circle-box {position: relative;display: inline-block;width: 40px;height: 40px;top: 15px;left: 5px;}.circle {width: 33px;height: 33px;line-height: 33px;text-align: center;border-radius: 50%;font-size: 12px;color: #fff;background: -webkit-linear-gradient(#fc9669, #f87675);background: linear-gradient(#fc9669, #f87675);position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}}
}

$('.ckfx-btn').css("display","none");// 分析进度function cir(){$('#ring').circleProgress({value: 1,size: 40,thickness:2,startAngle:-190,fill: {gradient: ["#fcc669", "#fc9369"]},animation:{duration: 10000}}).on('circle-animation-progress', function(event, progress) {$(this).siblings('.circle').find('strong').html(parseInt(100 * progress) + '%');$(this).parents(".clue-hd-right").find('.ckfx-btn').delay(10000).show(0);$('.redate-box').delay(10000).hide(0);});}$('.btnw').click(function(event){event.preventDefault();$(this).hide();$(this).parent().find('.redate-box').css("display","inline-block");cir();});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！