Циркулярный индикатор прогресса в Javascript

Question

У меня есть простая карусель для отображения некоторых изображений. Как и следовало ожидать, карусель авто вращается каждые х секунд.

В настоящее время у меня есть div, который анимирует ширину за x секунд, чтобы показать прогресс. Это позволяет пользователям видеть, как долго они должны ждать, пока не отобразится следующее изображение. Когда пользователь наводит курсор на изображение, индикатор выполнения сжимается. Когда они мышью, он начинает заполняться снова.

Однако вместо того, чтобы использовать скучный брус, я хотел попробовать использовать круг. Вроде как вращающийся круг, который вы видите во время загрузки ajax. Я понятия не имею, как это сделать.

Кто-нибудь может помочь? Это вообще возможно?

Answer 1

Чтобы избежать беспорядка n gifs / pngs для каждого шага индикатора прогресса, создайте один спрайт для всех шагов и складывайте их горизонтально или вертикально (например, если ваш индикатор прогресса равен 40x40 иВы хотите отобразить 8 шагов, создать изображение размером 320x40 и поместить их, увеличив значение слева направо).

Создайте новый элемент, размеры которого зафиксированы на размере одного шага (40x40в примере) и поместите этот спрайт в качестве фонового изображения.

Затем, когда вы получите тики от таймера (или setTimeout/Interval), сдвиньте свойство position-x фонового изображения на один размер (0,40, 80, 120 и т. Д.).

Это гораздо быстрее, чем иметь отдельное изображение для каждого шага, и конечный пользователь немедленно предварительно загружает весь спрайт в первое событие.

Answer 2

Создайте серию изображений, представляющих различные степени, которые вы хотели бы представить, делая различия настолько мелкими, как вам бы хотелось. Вы можете сделать четыре изображения, представляющие «прогресс» 0%, 25%, 75% и 100%, или сто изображений, представляющих разницу в 1%.

В JavaScript вместо изменения ширины полосы вы можете поменять местами соответствующее изображение для текущей величины прогресса. if (progress < 25) image = '0percent.png'; (и так далее).

Делать это без использования изображений можно было бы в некоторых современных браузерах с поддержкой HTML 5, но совершенно непрактично в других местах.

Обратите внимание, что это совсем не то, что стандартная графика загрузки. Эти счетчики вообще не отражают прогресс, поскольку они просто вращаются несколько раз, пока документ не загрузится. Поэтому прядильщики создаются в виде анимированных GIF-файлов, поэтому одно изображение может просто сидеть на странице, весело вращаясь, пока не будет удалено.

Answer 3

Вы можете использовать SVG или canvas.

Там также библиотеки , которые могут это сделать (например, this ?)

Answer 4

Вы вдохновили меня на создание индикатора прогресса, управляемого вручную.Я сделал демонстрацию этого здесь .Тогда я начал твикинг и решил превратить его в плагин.Плагин включает в себя таймер, а также несколько других опций.Посмотрите демо-версию плагина , может быть, это подойдет вам?