Циклический индикатор прогресса с jQuery

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

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

alt text

http://wiki.jqueryui.com/ProgressIndicator

Ответы

Ответ 1

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

Ответ 2

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

Ответ 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%
]

Ответ 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>

Приветствия