当前位置:主页 > jQuery库 > 其它 >

带有文本计数器的 jQuery 圆形进度条 - Circular-Progress-Bar
栏目分类:其它   发布日期:2021-08-22   浏览次数:

“Circular-Progress-Bar” 是一个简洁的 jQuery 插件。这个 jQuery 插件可以帮助您创建一个带有文本计数器的圆形进度条。该插件带有多个选项来高度自定义其功能。您可以设置自定义文本、颜色和最大值。同样,您也可以定义开始进度条文本计数的起始位置。

此外,该插件允许您设置自定义宽度和高度。因此,您可以在此插件的帮助下构建一个完全自定义的圆形进度条。


依赖:jQuery 3.0或最新版本和Bootstrap 4.1.3


如何使用文本计数器创建圆形进度条

1. 下载此项目后,将 jQuery 和 Bootstrap(可选)加载到您的网站中。

<script src="/jquery-3.4.1.min.js"></script>
<link href="/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="/bootstrap/4.3.1/js/bootstrap.min.js"></script>

2. 同样,在您的网站中包含插件的 CSS 和 Js 文件。

<!-- Circular-Progress-Bar CSS -->
<link rel="stylesheet" href="css/plugin.css">
<!-- Circular-Progress-Bar JS -->
<script src="js/plugin.js"></script>

3. 创建 HTML div 元素(具有唯一的 id 或 class),其中将动态呈现径向进度条。

<div class="container">
           <div class="row">
               <div class="col-sm-4 col-sm-offset-4">
                   <div class="my-progress-bar"></div>
               </div>
           </div>
       </div>

4. 最后,在 jQuery 文档就绪函数中初始化插件以激活进度条。

$(document).ready(function(){
        $(".my-progress-bar").circularProgress({
        line_width: 6,
        color: "#ccc",
        starting_position: 0, // 12.00点钟位置,25代表3.00点钟(按时针方向)
        percent: 0, // 百分比从
        percentage: true,
        text: "每一个像素背后都有更多的能量"
    }).circularProgress('animate', 99, 5000);
});

高级配置选项

以下是一些使用文本计数器创建 jQuery圆形进度条的高级配置选项。

选项默认类型说明
percentagetrueBoolean决定是否显示百分比。

示例:
$(".my-progress-bar").circularProgress({
    percentage : true,
});
text“”String进度条计数器的自定义文本。

示例:
$(".my-progress-bar").circularProgress({
    text : "",
});
counter_clockwisefalseBoolean定义顺时针或逆时针的进度条动画。逆时针为真,

例如:
$(".my-progress-bar").circularProgress({
    counter_clockwise : false,
});
percent100Number此选项可用于设置圆形进度条的最大值。

示例:
$(".my-progress-bar").circularProgress({
    percent : 100,
});
color“#000000”String定义文本的颜色。在此字符串选项中传递 HTML 颜色代码值,'

示例:
$(".my-progress-bar").circularProgress({
    color : "#000000",
});
height“300px”String它定义了进度条的高度,

例如:
$(".my-progress-bar").circularProgress({
    height : "300px",
});
width“300pxString它定义了进度条的宽度,

例如:
$(".my-progress-bar").circularProgress({
    width : "300px",
});
line_width8Number设置线宽,

示例:
$(".my-progress-bar").circularProgress({
    line_width : 8,
});
starting_position25Number决定从哪里开始进度条计数动画。

示例:
$(".my-progress-bar").circularProgress({
    starting_position : 25,
});


官方网站:https://github.com/Nebir/Circular-Progress-Bar

上一篇:没有了
下一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库