Интересный прогресс-бар

[apangin]

Не хватает ссылки на рабочий пример. И «30.3400000%» — это нечеловеческий ужас.

[dmitry_dvp]

Да и «осталось 0 дней» — не фонтан

[VladislavGH]

«До завершения осталось ~ 0 дн. 00:00:26.866 мс» — это тоже не фонтан.

Нужен водопад. :)

[Prof]

Ну может быть… Просто если рассмотреть длительный промежуток времени (допустим год), то циферки будут бежать оч. медленно, а за счет такого количества чисел в дробной части создается иллюзия постоянного прироста…

Хотя количество цифр в дробной части — личное дело каждого. Их можно и уменьшить ;)

[MrCrock]

Или округлить для отображения.

[andrewsch]

процентам не надо быстро бежать — достаточно чтобы оставшееся время бежало (и ему тоже не надо меняться слишком часто — милисекунды лишние)

[p00h]

Интересная доработка

[Dmitry_f]

Не могли бы вы демо показать?

[AgentSmith]

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

[Prof]

Демка готова. Ссылка в конце поста…

[Hig]

cp1251 выставьте. Хром не переварил.

ps: мне не понятно в чем идея? +Слишком много кода для простого бегущего ползунка…

[black_bunny]

Ваше демо хотя бы работает,
а по ссылке автора у меня «Горящие туры по всему миру!»

[Prof]

Извиняюсь за «Горящие туры по всему миру!». Дело в том, что зарегистрировал бесплатный хостинг для этой демки, а там на страницы перед вставлялась огромная корявая реклама. Убрал её при помощи , видимо из-за этого мой аккаунт так быстро удалили. Ссылка уже изменена на рабочую.

[black_bunny]

Спасибо, если бы не картинки можно было бы использовать какой-нибудь http://pastehtml.com/

[Zanoza]

100% не бывает, 99.999 максимум.

[k12th]

Надо было просто отнаследоваться.

[nolar]

Замечание, которое можете счесть полезным: считается, что для человеческого мозга и 99.9% видов деятельности (кроме научно-математической) достаточно трёх значащих цифр. Так, если речь идёт о процентах, то значение имеет только одна цифра после запятой (50.5% или 5.05%). Причём, заметьте, это на высшей грани значимости. Для приблизительной оценки прогресса в данном случае достаточно и двух цифр (55% или 5.5%), из которых мозг всё равно округлит вообще до одной значащей цифры в соответствии с какой-нибудь субъективной шкалой этого мозга (50% и 5% соотв.). Поэтому 30.34000000% не имеет практического смысла, но создаёт текстовый и визуальный мусор.

[Dmitry_f]

Откуда информация, поделитесь)

[nolar]

Про три значащих цифры — едва ли не аксиома всего мира, который работает с цифрами (а, ну ещё кроме бухгалтеров, им важны все разряды чтоб дебит сходился с кредитом).

Про одну значащую цифру для приблизительной оценки прогресса — субъективно-эмипирически. Ну вот скажите, вам важна разница что проект на стадии 50.5% vs 50.6%? Или 50% vs 51%? Вы всё равно будете рассматривать это как «половину». А другие значения для оценки всё равно наложите на сетку 0-10-25-33-50-66-75-90-100% (доли 1/4, 1/3, 1/2, и края (стадии «ну, поехали» и «ещё неделя — и закончим»)).

[Dmitry_f]

Я рассчитывал вы знаете литературу, в которой можно почитать на эту тему, я уверен там множество других интересных фактов имеется.
Субъективно-эмпирически проценты в прогрессбаре вообще совершенно никому ни о чем не говорят. Оставшееся время — более лучшая оценка.
А вообще прогрессбар — это то место в интерфейсе, которому требуеся наилучшая отрисовка, эффектность и оригинальность (если его длительность от 5 секунд хотя-бы и он модальный). Раз человеку приходится ждать — нужно сделать его ожидание захватывающим. Какие-нибудь советы в тему показывать, или отражать состояние прогресса работ, или просто хороший техдизайн, чтобы залипнуть. Немодальный прогресс-бар еще лучше.

[Slider_X]

Неужели в JS нельзя как-то более по-человечески работать с датами и временем? Куча if'ов малость выносит мозг и собственно отвелекает от самой работы с прогресс баром.

[Prof]

Можно было при каждой итерации вновь подсчитывать ms, days, hours, min, sec, как я первоначально и сделал. В этом случае никакой кучи if`ов. Но на мой взгляд, чем каждую итерация производить вычитание, деление и умножение достаточно больших чисел, экономичнее сделать это только один раз в самом начале, а затем просто вычитать по единичке из нужного «разряда», выбирая «разряд» при помощи этих if`ов.

[kai]

В данном случае что вы потеряете? Пару тактов процессора? ;-) Это капля в море на фоне браузера. Поэтому я бы сделал код проще.

[B_Vladi]

Как показывает практика, надежнее всё же вычислять прошедшее время при каждой итерации и подгонять под это анимацию. Если случается лаг (а он часто случается, например, в фф на тяжелых страницах), общее время анимации будет больше.

[Slider_X]

Эм… Простите, но так таймер нельзя писать вообще! Нет никакой гарантии, что пройдёт ровно 123 ms (т.е. заданный вами интервал). Более того, точно столько времени не пройдёт никогда. У вас получается, что время берётся как бы примерно. Вы хоть попробуйте засечь с часами, сколько проходит реально времени и сколько пишется у вас. Там разброс гигантский.

Более того, функция setInterval не вызывает, когда страница не активна! Если перейти на другую вкладку и потом вернуться, то время останется старое (проверил в FF). А всё потому что вы просто отняли шаг при следующем вызове функции!

На каждом этапе нужно брать время и его проверять от стартового. Правда, там уже будут баги, если часы перевести и нужно это обходить.

[B_Vladi]

Эмм, если часы перевести во время анимации? Довольно редкий случай, тестерам и в голову не придёт :)

[Slider_X]

Ну вот, в текущей реализации, если перевести часы в системе, то это непосредственно отражается на таймере — прыгает, становится отрицательным или сразу 100% :)
Честно говоря, не уверен, что это вообще можно обойти только лишь на одном клиенте в JS. Я не придумал как.

[SowingSadness]

Что это за эпический пи@#ец?
А) Надо было оформить это ввиде виджета или хотя бы в виде плагина к JQuery.
Б) Что это за циферки в коде — живо менять их на переменные(констант же нет)
В) Что это за полотнище из if'ов?

Живо переписывать.

[kai]

Живо перепиши!

[SowingSadness]

оплатят — перепишу

[kai]

На Хабре болтать — не мешки на спине тягать! ;-)

[Prof]

Исходный код и статья переписаны с учётом замечаний, указанных в 2х последних комментах. Спасибо их авторам…

[irsick]

Где-то читал, что специалисты UX Apple неспроста используют прогресс-бары, внутри которых узор движется в обратную сторону. Это создаёт у пользователя иллюзию непрерывного движения, даже если прогресс-бар стоит на месте, что, соответственно, уменьшает его раздражение на тему «ну когда же оно загрузится?!».

Рекомендую повернуть узор вспять.

[Adiost]

Креативная идея

Apple

Теперь понятно, почему я подобного трюка не наблюдаю нигде, кроме продуктов яблочной компании. Не в обиду фанатам Apple, эта компания объективно патентует даже самые незначительные мелочи.

[AndyRoss]

Поверьте) Порой это раздражает еще больше)

[Evengard]

По мне так просто анимацию надо останавливать как только достигнуто 100%

[B_Vladi]

Как только достигнуто 100% — прогресбар нужно убирать.

[osypchuk]

Наверняка это защищено каким-то из патентов apple, так что лучше этого не делать )

[kai]

Кому нужно, тот все уберет ;-) это же опенсурс!

[Mandor]

До завершения осталось ~ 0 дн. 00:00:0057.781 мс

Так писать некорректно. Если пишете время в формате 00:00:00.00, то не надо писать «мс», если пишете в милисекундах — пишите «57781 мс», если в секундах — «57.781 с».

[rrromka]

Я использовал этот же прогресс-бар вместе со скриптом plupload (скрипт для загрузки файлов на сервер с очень гибкими настройками), получилось вот что: http://plupload.kece.ru/.

[Push_Ok]

Если в хроме открыть диалог и подождать то страница падает.

img688.imageshack.us/img688/295/selection083.png

[rrromka]

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

[dmitry_dvp]

По-человечески будет «Осталось 3 секунды» или «Осталось несколько секунд»

[NikoM]

Весьма сомнительная реализация и визуализация. Не понимаю что эта статья делает на главной.

[SailorMax]

В большом проекте, где все эти библиотеки уже используются, может этот прогресс бар и подойдет, а так — 90КБ+ на прогресс бар — это сильно :)

[osypchuk]

Это ведь блог JQuery, так что jquery есть у всех.

А вот jquery ui на 210 KB это перебор — нужно было бы выбрать только обязательные модули. ui.core + ui.progressbar занимают примерно 12 kb, может еще 1-2 компоненты действительно нужны.

[johnnythekid]

Научите этот прогрессбар красиво округлять до одного-двух разрядов. И зачем нужны «0 дн. 00:00:00», такое ведь лучше отсекать.

[ApmeM]

Кстати на тему прогрессбаров — иногда возникает необходимость сделать «бесконечный» прогрессбар. Тоесть такой, который вроде как и идет к 100%, но чем ближе к ним, тем медленнее, и в итоге до 100 никогда не доходит, а в пределе стремится например к 95 и только по определенному условию доползает до конца.

Это надо например при длительных операциях на стороне сервера, если не известно точно когда он закончится. В этом случае можно только предположить примерное время окончания, а все что больше — делать вид что так и должно быть :)

Наглядный пример — прогрессбар в тимсити, где они показывают овертайм по сравнению с предыдущими запусками.

Кто нибудь знает уже готовый вариант подобного прогрессбара (лучше всего в виде jQuery плагина)?

[osypchuk]

Зачем изобретать велосипед? Уместнее использовать «крутилку»
http://www.ajaxload.info/

[ApmeM]

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

Например на стороне сервера идет распаковка большого архива, и при этом известно, что архив такого же размера распаковывался в прошлый раз 15 минут.
— Во первых пользователь может нажать «начинай распаковку» и уйти смотреть другие страницы, а потом вернуться и посмотреть на сколько операция завершена
— Во вторых мы не знаем точно содержимое архива, и не можем сказать точно сколько это займет времени, но сильно врать пользователю тоже не хочется.

ЗЫЖ пример с архивом, конечно, выдуманный. однако в решаемой задаче это выглядело примерно так:
— распаковать архив
— перенести нужные файлики по местам
— запустить sql процедуры (тоже количество данных может быть не маленьким)
— настроить что-нибудь в системе (если права есть)
— радостно сообщить пользователю, что где-то по пути все упало

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