jQuery 循环进度指示器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3901603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Circular progress indicator with jQuery
提问by newbie
I need circular progress indicator. How should I implement this?
我需要循环进度指示器。我应该如何实施？
What I'm looking for is what jQuery UI has in their planning page, but its not yet implemented. I'm just curious if anyone has implemented this before. See item 6 in following image.
我正在寻找的是 jQuery UI 在他们的计划页面中有什么，但它尚未实现。我只是好奇是否有人以前实施过这个。请参阅下图中的第 6 项。
回答by mpen
Like, one of these? You don't need a plugin for that. Just .show()and .hide()a GIF as necessary (or insert it into the DOM, whatever floats your boat).
比如，其中之一？你不需要插件。刚.show()和.hide()一个GIF必要的（或将其插入到DOM，不管你的船浮筒）。
回答by Matt Austin
Not jQuery, but you might want to take a look at the Rapha?ljavascript library, and in-particular the polar clock example, and the 'arc' custom attribute. I've used Rapha?l and jQuery together to generate some static circular progress bars before - it works quite nicely.
不是 jQuery，但您可能想看看Rapha?ljavascript 库，特别是polar clock example和 'arc' 自定义属性。我以前使用过 Rapha?l 和 jQuery 来生成一些静态圆形进度条 - 它工作得非常好。
回答by airtonix
You could use jQuery to slide the background position around, and use or create the appropriate css sprite image table for it.
您可以使用 jQuery 来滑动背景位置，并为其使用或创建适当的 css sprite 图像表。
of course you'd need to have 100 sprite cells, and then you'd need to compile a list of background position co-ords into an multi-dimensional array/table/dictionary.
当然，你需要有 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%
]
回答by Claudiu
What are you loading? A basic example would be:
你在加载什么？一个基本的例子是：
<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>
Cheers
干杯
