使用jQuery实现圆形进度指示器

Question

我需要一个圆形进度指示器。如何实现？

我想要的是 jQuery UI 在他们的计划页面中所拥有的，但它还没有被实现。我只是好奇是否有人之前已经实现了它。请参见以下图片中的项目 6。

http://wiki.jqueryui.com/ProgressIndicator

- newbie

Answer 1

比如说，像这样的加载动画？你不需要一个插件就能做到。只需根据需要使用 .show() 和 .hide()来控制GIF的显示和隐藏（或将其插入到DOM中，取决于你的喜好）。

- mpen

---

抱歉我的问题可能有点含糊，但我的意思是jUqery ui团队正在计划什么：http://wiki.jqueryui.com/ProgressIndicator，请参见第2项-视觉设计第6项。那种显示已完成百分比的循环进度。 - newbie

Answer 2

不是jQuery，但是你可能想看一下Raphaël JavaScript库，特别是polar clock example和“arc”自定义属性。我以前曾经使用过Raphaël和jQuery一起生成一些静态的圆形进度条 - 效果非常好。

- Matt Austin

---

谢谢@matt-austin，这个库看起来非常酷。我打算尝试实现一个小插件，用基本选项和回调来做一个简单的定时循环动画。如果成功了，我会在github上发布一个答案到这个项目中。 - Connor Doyle

Answer 3

你可以使用jQuery来滑动背景位置，并使用或创建适当的CSS雪碧图像表进行操作。

当然，你需要拥有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%
]

- airtonix

Answer 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>

干杯

- Claudiu

---

#load 的 href 应该是 /path/to/animation.gif，并且在 $('#load').click(...) 中应该使用 event.preventDefault()。这样，如果用户禁用了 JS，页面仍然能够有意义地工作。 - Peter Ajtai

所以，您认为如果用户单击“加载”链接并查看动画（实际的.gif），即使他禁用了JS，这也是有意义的吗？javascript:void(0)似乎在YouTube的API示例中非常有效...我认为不做任何事情比导致动画gif更好。 - Claudiu