循环进度指示器与jQuery

Question

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

我正在寻找的是jQuery UI在其规划页面中的含义，但尚未实现。我只是好奇，如果有人之前已经实现了这一点。见下图中的第6项。

http://wiki.jqueryui.com/ProgressIndicator

Answer 1

赞，one of these？你不需要插件。根据需要只需.show()和.hide() GIF（或将其插入DOM，无论您的船是什么漂浮）。

Answer 2

不是jQuery，但您可能需要查看Raphaël javascript库，特别是polar clock example和'arc'自定义属性。我之前一直使用Raphaël和jQuery生成一些静态循环进度条 - 它运行得非常好。

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

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>

干杯