Prof 18 июл 2011 в 19:36

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

5 мин

39K

jQuery *

Из песочницы

+35

Комментарии 56

apangin 18 июл 2011 в 19:52

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

dmitry_dvp 18 июл 2011 в 20:22

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

VladislavGH 20 июл 2011 в 09:44

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

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

Prof 18 июл 2011 в 20:39

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

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

MrCrock 18 июл 2011 в 21:18

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

andrewsch 19 июл 2011 в 07:14

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

p00h 18 июл 2011 в 19:53

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

Dmitry_f 18 июл 2011 в 20:20

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

AgentSmith 18 июл 2011 в 20:25

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

Prof 18 июл 2011 в 20:33

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

НЛО прилетело и опубликовало эту надпись здесь

Hig 18 июл 2011 в 20:49

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

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

black_bunny 18 июл 2011 в 21:01

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

Prof 18 июл 2011 в 21:07

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

black_bunny 18 июл 2011 в 21:12

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

НЛО прилетело и опубликовало эту надпись здесь

Zanoza 19 июл 2011 в 03:22

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

НЛО прилетело и опубликовало эту надпись здесь

k12th 18 июл 2011 в 20:42

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

nolar 18 июл 2011 в 20:49

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

Dmitry_f 19 июл 2011 в 07:23

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

nolar 19 июл 2011 в 07:38

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

Про одну значащую цифру для приблизительной оценки прогресса — субъективно-эмипирически. Ну вот скажите, вам важна разница что проект на стадии 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 19 июл 2011 в 07:50

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

Slider_X 18 июл 2011 в 21:11

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

Prof 18 июл 2011 в 21:20

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

kai 18 июл 2011 в 22:14

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

B_Vladi 19 июл 2011 в 07:07

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

Slider_X 18 июл 2011 в 21:40

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

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

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

B_Vladi 19 июл 2011 в 07:13

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

Slider_X 19 июл 2011 в 15:34

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

SowingSadness 18 июл 2011 в 21:41

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

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

kai 18 июл 2011 в 22:12

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

SowingSadness 19 июл 2011 в 05:29

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

kai 19 июл 2011 в 19:20

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

Prof 18 июл 2011 в 22:57

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

irsick 19 июл 2011 в 01:31

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

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

Adiost 19 июл 2011 в 03:38

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

Apple

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

AndyRoss 19 июл 2011 в 06:05

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

Evengard 19 июл 2011 в 07:09

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

B_Vladi 19 июл 2011 в 07:17

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

osypchuk 19 июл 2011 в 12:33

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

НЛО прилетело и опубликовало эту надпись здесь

kai 19 июл 2011 в 05:34

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

Mandor 19 июл 2011 в 05:41

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

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

rrromka 19 июл 2011 в 07:15

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

Push_Ok 19 июл 2011 в 07:58

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

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

rrromka 19 июл 2011 в 08:21

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

НЛО прилетело и опубликовало эту надпись здесь

dmitry_dvp 21 июл 2011 в 16:14

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

NikoM 19 июл 2011 в 07:51

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

SailorMax 19 июл 2011 в 08:36

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

osypchuk 19 июл 2011 в 12:38

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

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

johnnythekid 19 июл 2011 в 08:48

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

ApmeM 19 июл 2011 в 09:04

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

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

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

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

osypchuk 19 июл 2011 в 12:40

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

ApmeM 19 июл 2011 в 16:32

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

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

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

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий