带有 jQuery 的圆形进度指示器答案

【问题标题】：Circular progress indicator with jQuery带有 jQuery 的圆形进度指示器
【发布时间】：2011-04-23 12:43:03
【问题描述】：

我需要循环进度指示器。我应该如何实现这个？

我正在寻找的是 jQuery UI 在他们的规划页面中的内容，但尚未实现。我只是好奇以前是否有人实施过。请参见下图中的第 6 项。

http://wiki.jqueryui.com/ProgressIndicator

【问题讨论】：

标签： jquery progress-bar

【解决方案1】：

比如one of these?你不需要插件。只需 .show() 和 .hide() 一个必要的 GIF（或将其插入到 DOM 中，随便你的船）。

【讨论】：

对不起，我的问题可能有点含糊，但我的意思是 jUqery ui 团队正在计划：wiki.jqueryui.com/ProgressIndicator 见 2 - 视觉设计第 6 项。这种循环进度表明完成了多少任务。

【解决方案2】：

不是 jQuery，但您可能想查看 Raphaël javascript 库，尤其是 polar clock example 和“arc”自定义属性。我之前曾一起使用 Raphaël 和 jQuery 来生成一些静态的圆形进度条 - 效果非常好。

【讨论】：

谢谢@matt-austin 这个库看起来很酷。我将尝试实现一个小插件来做一个带有基本选项和回调的简单定时循环动画。如果我遇到成功，我将在 github 上发布该项目的答案。

【解决方案3】：

您可以使用 jQuery 来滑动背景位置，并为其使用或创建适当的 css sprite 图像表。

当然，您需要有 100 个精灵单元，然后您需要将背景位置坐标列表编译成多维数组/表格/字典。

progressMeterSpriteCoords = [
 {x: 0, y: 0},      //0%
 {x: -16, y: 0},    //1%
 {x: -32, y: 0},    //2%
  ... etc etc..
 {x: -320, y: -0},  //19%
 {x: 0, y: -16},    //20%
 {x: -16, y: -16},  //21%
 {x: -32, y: -16},  //22%
  ... etc etc..
 {x: -320, y: -16}, //29%
  ... etc etc..
 {x: -320, y: -320} //99%
]

【讨论】：

【解决方案4】：

你在加载什么？一个基本的例子是：

<div id="loading"></div>
<a href="javascript:void(0);" id="load">Load!</a>

<script type="text/javascript">
    $('#load').click(function(){ // click event on the load link
        $('#loading').html('<img src="/path/to/animation.gif" />'); // display a loading animation where the content goes
        $.get('/file/to/load.php', function(data) { // request content to be displayed
            $('#loading').html(data); // display content
        });
    });
</script>

干杯

【讨论】：

#load 的href 应该是/path/to/animation.gif 并且你应该在`$('#load').click(...)` 中使用event.preventDefault()。 - 这样，如果用户禁用了 JS，页面实际上可以正常工作。
那么，你说如果用户点击加载链接并看到动画（实际的.gif）如果他禁用了JS，那有意义吗？ javascript:void(0) 似乎工作得很好，即使在 YouTube 的 API 示例中......我认为什么都不做比生成动画 gif 更好。