使用jQuery的循环进度指示器

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

我要寻找的是jQueryUI在其计划页面中的内容，但它尚未实现。我只是好奇以前是否有人实施过这个。参见下图中的第6项

---

像什么？你不需要插件。根据需要，只需

.show（）

和

.hide（）

一个GIF（或者将它插入DOM，无论你的船漂浮在哪里）。

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

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

$（“#加载”）。单击加载链接上的（函数（）{//单击事件
$（'#loading'）.html（''）//在内容所在的位置显示加载动画
$.get（'/file/to/load.php'，函数（数据）{//请求显示内容
$（'#加载'）.html（数据）；//显示内容
});
});

---

当然不是jQuery，但是您可能想看看javascript库，尤其是，和“arc”自定义属性。我以前曾使用Raphaël和jQuery一起生成过一些静态循环进度条，效果非常好。

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

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

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%
]

---

#load

的href应该是

/path/to/animation.gif

，并且应该在“$（'#load'）中使用

event.preventDefault（）

。单击（…）`.-这样，如果用户禁用了JS，页面实际上会有意义地工作。那么，你说如果用户单击加载链接并看到动画（实际的.gif），如果用户禁用了JS，那就有意义了？javascript:void（0）似乎工作得很好，甚至在YouTube的API示例中。。。我觉得什么都不做总比生成动画gif好。对不起，我的问题可能有点太模糊了，但我的意思是jUqery ui团队正在计划的内容：参见2-视觉设计第6项。这种循环的进展告诉我们有多少进阶已经完成。谢谢@matt austin这个图书馆看起来真的很酷。我将尝试实现一个小插件，用基本选项和回调来做一个简单的定时循环动画。如果我获得成功，我将在github上发布项目的答案。