Круговой индикатор прогресса с jQuery

Question

Мне нужен круговой индикатор прогресса.Как мне это реализовать?

То, что я ищу, - это то, что jQuery UI имеет на своей странице планирования, но оно еще не реализовано.Мне просто любопытно, если кто-нибудь реализовал это раньше.См. Пункт 6 на следующем изображении.

http://wiki.jqueryui.com/ProgressIndicator

Answer 1

Как, один из этих ? Вам не нужен плагин для этого. Просто .show() и .hide() GIF по мере необходимости (или вставьте его в DOM, где бы вы ни плыли).

Answer 2

Не jQuery, но вы можете взглянуть на библиотеку javascript Raphaël и, в частности, пример полярные часы и пользовательский атрибут arc. Я использовал Raphaël и jQuery вместе для генерации статических круговых индикаторов прогресса - это работает очень хорошо.

Answer 3

Вы можете использовать jQuery для перемещения фоновой позиции, а также использовать или создать для нее соответствующую таблицу изображений спрайтов CSS.необходимо скомпилировать список координат фона в многомерный массив / таблицу / словарь.

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>

Приветствия