radialIndicator 环形进度条插件

蔚落 2021-08-05 02:34 616阅读 0赞

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
            <script src="js/radialIndicator.js"></script>
            <style>
                .prg-cont{
                    width: 100%;
                    height: 500px;
                    text-align: center;
                    margin: 0 auto;
                    margin-top: 200px;
                }
            </style>
        </head>
        <body>
            <div class="prg-cont" id="indicatorContainer"></div>
            <script>
            var radialObj = $('#indicatorContainer').radialIndicator({
                barColor: {
                    0: '#FF0000',
                    33: '#FFFF00',
                    66: '#0066FF',
                    100: '#33CC33'
                },
                percentage: true
            }).data('radialIndicator');
            $(".prg-cont canvas").hover(function(){
                radialObj.animate(100);
            },function(){
                radialObj.animate(0);
            })
            </script>
        </body>
    </html>

效果 ：  
鼠标移入：0%-->100%;

![6587214-227e4c4a6251546a.jpg][]

123.jpg

鼠标移出：100%-->0%;

[6587214-227e4c4a6251546a.jpg]: /images/20210804/5a4dd1d5468a425ca8d9bc46d6d7e506.png

发表评论取消回复

表情：

评论列表（有 0 条评论，616人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 环形进度条

![在这里插入图片描述][20201009093934659.png_pic_center] cnpm install vue-circleprogressbar

客官°小女子只卖身不卖艺/ 2022年12月13日 01:29/ 0 赞/ 222 阅读

相关 van-Circle 环形进度条

van-Circle 环形进度条 ![在这里插入图片描述][20210309235028983.gif] 涉及的功能点：圆形进度条：文本自定义样式大小

爱被打了一巴掌/ 2022年10月23日 08:23/ 0 赞/ 519 阅读

相关 js 环形渐变颜色进度条

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

偏执的太偏执、/ 2021年11月18日 00:01/ 0 赞/ 597 阅读

相关环形进度条（jQuery，canvas）

接到了一个在手机app上绘制圆环进度条的需求。找了很多插件都不是很满意，就自己用jQuery+canvas画了一个。最终效果图 ![这里写图片描述][70] 完整代码

╰+攻爆jí腚メ/ 2021年09月27日 06:18/ 0 赞/ 422 阅读

相关进度条插件

进度条插件一、NProgress 一、NProgress 使用 <link rel='sylesheet' href='nprogress.cs

╰半夏微凉°/ 2021年09月07日 06:12/ 0 赞/ 567 阅读

相关封装环形加载进度条（Vue插件版和原生js版）

1、效果预览 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9

电玩女神/ 2021年08月13日 11:04/ 0 赞/ 343 阅读

相关 radialIndicator 环形进度条插件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8

蔚落/ 2021年08月05日 02:34/ 0 赞/ 617 阅读

相关 NProgress 进度条插件的使用

NProgress的使用一. NProgress - css 文件和 js 文件下载地址二. 引入 NProgress 的 css文件

Love The Way You Lie/ 2021年07月25日 22:56/ 0 赞/ 591 阅读

相关环形变色进度条

思路: svg 两个圆,一个为进度条底色,一个为进度条,使圆环内部填充颜色不可见,设置外部边框线为stroke-dasharray=‘0,xxx’和线宽

r囧r小猫/ 2021年07月25日 00:03/ 0 赞/ 468 阅读

相关重构-环形进度条

动画: 颜色变化、宽度增加圆环实现: svg中两个圆,背景色都为none,通过设置边框为虚线,其中一个做背景,虚线的实线长度来实

约定不等于承诺〃/ 2021年07月24日 20:19/ 0 赞/ 463 阅读