CircularLoader.Js是一个使用HTML5和javascript制作百分比值柱状进度条的jQuery插件-BFW插件库

CircularLoader.Js是一个使用HTML5和javascript制作百分比值柱状进度条的jQuery插件

CircularLoader.Js是一个使用HTML5和javascript制作百分比值柱状进度条的jQuery插件，用于创建可自定义的带有或不带有百分比值的柱状进度条。它可用于创建进度指示器。这是一个完全可自定义的插件，可与所有与HTML5兼容的浏览器一起使用。这是一个非常易于集成和易于使用的插件。有关如何使用CircluarLoader的详细说明，请访问文档。

完全可定制

所有的背景色，进度条颜色，字体颜色，字体大小，圆半径都是可以完全自定义的。可以根据站点的主题进行简单选择。

跨浏览器兼容性

与支持HTML5的所有主要浏览器版本兼容：Internet Explorer 9.0 +，Google Chrome 4.0 +，Mozilla Firefox 2.0 +，Safari 3.1+

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件

第三步配置参数

$("#divProgress").circularloader({
backgroundColor: "#ffffff", //内圈背景色
fontColor: "#000000", //进度字体颜色
fontSize: "40px", //字体大小
radius: 70, //弧度
progressBarBackground: "#2596cc", //进度条背景色
progressBarColor: "#9cdfff", //进度条颜色
progressBarWidth: 25, //进度条宽度
progressPercent: 20, //进度条百分比值
progressValue: 0, //进度值
showText: true, //是否显示文字
title: "Simple Loader", //进度条标题
});
});

完整代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["CircularLoader-v1.3"], function() {
                $("#divProgress").circularloader({
                    backgroundColor: "#ffffff", //background colour of inner circle
                    fontColor: "#000000", //font color of progress text
                    fontSize: "40px", //font size of progress text
                    radius: 70, //radius of circle
                    progressBarBackground: "#2596cc", //background colour of circular progress Bar
                    progressBarColor: "#9cdfff", //colour of circular progress bar
                    progressBarWidth: 25, //progress bar width
                    progressPercent: 20, //progress percentage out of 100
                    progressValue: 0, //diplay this value instead of percentage
                    showText: true, //show progress text or not
                    title: "Simple Loader", //show header title for the progress bar
                });
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <div id="divProgress"></div>

</body>
</html>