jQuery插件，用于绘制动画圆形进度条

Posted

tags:

中文标题：jQuery插件，用于绘制动画圆形进度条 原文标题：jQuery Plugin to draw animated circular progress bars 项目评级：Star:1100      Fork:325 下载地址：https://github.com/kottenator/jquery-circle-progress 详情介绍

jquery循环进度

jQuery插件，用于绘制动画圆形进度条，如下所示：

查看更多示例！或者可能是那个疯狂的？

安装

做出您的选择：

用法

如果您将AMD或CommonJS与一些JS捆绑器一起使用，请参阅下面的UMD部分。

选项

指定上面示例中的选项。

<表格>

选项

描述

价值

这是唯一需要的选项。应为0.0至1.0默认值：0

尺寸

圆圈/画布的像素大小默认值：100

起始角度

初始角度（对于0值）默认值：-Math.PI

反向

反向动画和圆弧绘制默认值：false

厚度

弧的宽度。默认情况下，它自动计算为size的1/14，但您可以设置自己的数字默认值："auto"

线条帽

弧线帽："butt"、"round"或"square"-阅读更多默认值：＜129＜

填充

圆弧填充配置。您可以指定下一个：-"#ff1e41"- color: "#ff1e41" -＞1215＞-＜12.16＞-＜1.217＞-"round"-value- image: "http://i.imgur.com/pT0i89v.png" -＞1221＞-0默认值： gradient: ["#3aeabb", "#fdd250"]

空填充

“空”弧的颜色。目前只支持颜色填充默认值："rgba(0, 0, 0, .1)"

动画

动画配置。请参见jQuery动画。您也可以将其设置为false默认值： duration: 1200, easing: "circleProgressEasing" "circleProgressEasing"＜em＞只是一个宽松的三次宽松

动画开始值

默认动画从0.0开始，到指定的value结束。让我们称之为直接动画。如果要制作反向动画，则应将animationStartValue设置为1.0。您也可以指定0.0到1.0之间的任何其他值默认值：0.0

插入模式

画布插入模式：将其附加或预附加到父元素中？默认值："prepend"

从1.1.3版本，您可以将任何配置选项指定为HTMLdata-属性。

它只能在init上工作，即在小部件初始化后，您只能通过.circleProgress(/*...*/)方法更新其属性。data-属性将被忽略。

此外，像"fill"或"animation"这样的对象选项应该是有效的JSON（不要忘记HTML转义）：

事件

<表格>

事件

描述

处理程序

circle-inited

在初始化或重新初始化时触发

function(event)：-event-jQuery事件

circle-animation-start

动画启动后触发

function(event)：-event-jQuery事件

circle-animation-progress

在每个动画刻度上触发

function(event, animationProgress, stepValue)：-event-jQuery事件-animationProgress-从0.0到1.0-stepValue-当前步长值：从＜120＜到value

circle-animation-end

动画完成后触发

function(event)：-event-jQuery事件

浏览器支持

该库使用<canvas>，所有现代浏览器＜em＞（包括移动浏览器）都支持该功能

和Internet Explorer 9+（我可以使用吗）。

我还没有为不受支持的浏览器实现任何回退/polyfill

（即适用于Internet Explorer 8和旧版本的/misc浏览器）。

UMD公司

我使用UMD模板作为jQuery插件，它结合了三件事：

浏览器全局设置

AMD公司

假设您在libs/目录中有jquery、jquery-circle-progress和requirejs：

您可以根据需要配置RequireJS，只需使'jquery'依赖项可访问即可。

通用JS

您可以使用任何JS捆绑包

r（Webpack、Browserify等）-不需要特定的配置。

API

获取/设置值

了解了：

它将返回第一个项目的值（我指的是$('.circle').length >= 1时＜em>第一次）。

只有在小部件已经初始化的情况下，它才能工作。引发错误，否则。

设置它：

它将更新所有选定项目的值，并设置更改的动画。

它不重新绘制小部件，而是更新值&；设置更改的动画。

例如，它可能是一个AJAX加载指示器，显示加载进度。

得到<canvas>

它将返回第一个项目的<canvas>（我指的是$('.circle').length >= 1时的＜em>第一次）。

只有在小部件已经初始化的情况下，它才能工作。引发错误，否则。

获取CircleProgress实例

重新绘制现有圆

只有在小部件已经初始化的情况下，它才能工作。引发错误，否则。

更改默认选项

常见问题

如何仅当圆圈出现在浏览器的视图中时（滚动时）才开始动画？

这是我提出的解决方案。

如何使尺寸灵活？

例如，对于响应式设计，您可以通过以下方式进行。

如果我需要它在IE8中运行怎么办？

IE8没有完整的功能支持（实际上，我根本没有支持IE8）。但你可以听从我的建议。

如何停止动画？

这是你能做的。

我可以处理“点击”事件吗？

它不在“核心”中，但您可以使用我的鼠标/触摸事件处理示例。

我可以定制一下形状吗？

这有点“棘手”，但有可能。这是我的小收藏品。

发展

安装

修改

更改为dist/circle-progress.js后，您需要更新dist/circle-progress.min.js：

如果您使用的是JetBrains IDE中的一个，那么您可以配置一个File Watcher。

也可以使用一些CLI工具，如Watchman。

测验

Sauce实验室：

生成文档

API文档尚未完成，但您可以构建它们：

它们将在docs/api/中生成。

发布新版本

jquery 圆形进度条

android 怎么自定义绘制如下图中这种进度条

圆形进度条

超赞圆形动画进度条，爱了爱了(使用HTMLCSS和bootstrap框架)

超赞圆形动画进度条，爱了爱了(使用HTMLCSS和bootstrap框架)

如何使用逆时针动画显示自定义圆形进度条？