Мне нужен круговой индикатор прогресса. Как мне это реализовать?
То, что я ищу, - это то, что пользовательский интерфейс jQuery имеет на странице планирования, но еще не реализован. Мне просто любопытно, что кто-то уже реализовал это раньше. См. Пункт 6 на следующем изображении.
Как, один из них? Для этого вам не нужен плагин. Просто .show() и .hide() GIF по мере необходимости (или вставьте его в DOM, независимо от того, что плавает ваша лодка).
Не jQuery, но вы можете взглянуть на java-библиотеку Raphaël, а в частности пример полярных часов и атрибут "arc". Я использовал Raphaël и jQuery вместе для создания некоторых статических круговых индикаторов выполнения - это работает очень хорошо.
Вы можете использовать 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%
]
Что вы загружаете? Основной пример:
<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>
Приветствия