How to become an author
Search
Write a publication
Pull to refresh

Comments 56

Не хватает ссылки на рабочий пример. И «30.3400000%» — это нечеловеческий ужас.
Total votes 30: ↑28 and ↓2+26
Да и «осталось 0 дней» — не фонтан
Total votes 10: ↑10 and ↓0+10
«До завершения осталось ~ 0 дн. 00:00:26.866 мс» — это тоже не фонтан.

Нужен водопад. :)
Total votes 2: ↑0 and ↓2-2
Ну может быть… Просто если рассмотреть длительный промежуток времени (допустим год), то циферки будут бежать оч. медленно, а за счет такого количества чисел в дробной части создается иллюзия постоянного прироста…

Хотя количество цифр в дробной части — личное дело каждого. Их можно и уменьшить ;)
Total votes 2: ↑2 and ↓0+2
Или округлить для отображения.
This comment wasn’t rated yet0
процентам не надо быстро бежать — достаточно чтобы оставшееся время бежало (и ему тоже не надо меняться слишком часто — милисекунды лишние)
Total votes 1: ↑1 and ↓0+1
Чтение такого количества кода и текста должно быть оправдано демкой.
Демка просто необходима, чтобы видеть результат, ради чего всё это писалось!
Total votes 1: ↑1 and ↓0+1
Демка готова. Ссылка в конце поста…
Total votes 2: ↑2 and ↓0+2
UFO just landed and posted this here
cp1251 выставьте. Хром не переварил.

ps: мне не понятно в чем идея? +Слишком много кода для простого бегущего ползунка…
Total votes 6: ↑1 and ↓5-4
Ваше демо хотя бы работает,
а по ссылке автора у меня «Горящие туры по всему миру!»
This comment wasn’t rated yet0
Извиняюсь за «Горящие туры по всему миру!». Дело в том, что зарегистрировал бесплатный хостинг для этой демки, а там на страницы перед вставлялась огромная корявая реклама. Убрал её при помощи , видимо из-за этого мой аккаунт так быстро удалили. Ссылка уже изменена на рабочую.
This comment wasn’t rated yet0
UFO just landed and posted this here
100% не бывает, 99.999 максимум.
This comment wasn’t rated yet0
UFO just landed and posted this here
Надо было просто отнаследоваться.
This comment wasn’t rated yet0
Замечание, которое можете счесть полезным: считается, что для человеческого мозга и 99.9% видов деятельности (кроме научно-математической) достаточно трёх значащих цифр. Так, если речь идёт о процентах, то значение имеет только одна цифра после запятой (50.5% или 5.05%). Причём, заметьте, это на высшей грани значимости. Для приблизительной оценки прогресса в данном случае достаточно и двух цифр (55% или 5.5%), из которых мозг всё равно округлит вообще до одной значащей цифры в соответствии с какой-нибудь субъективной шкалой этого мозга (50% и 5% соотв.). Поэтому 30.34000000% не имеет практического смысла, но создаёт текстовый и визуальный мусор.
Total votes 5: ↑5 and ↓0+5
Откуда информация, поделитесь)
This comment wasn’t rated yet0
Про три значащих цифры — едва ли не аксиома всего мира, который работает с цифрами (а, ну ещё кроме бухгалтеров, им важны все разряды чтоб дебит сходился с кредитом).

Про одну значащую цифру для приблизительной оценки прогресса — субъективно-эмипирически. Ну вот скажите, вам важна разница что проект на стадии 50.5% vs 50.6%? Или 50% vs 51%? Вы всё равно будете рассматривать это как «половину». А другие значения для оценки всё равно наложите на сетку 0-10-25-33-50-66-75-90-100% (доли 1/4, 1/3, 1/2, и края (стадии «ну, поехали» и «ещё неделя — и закончим»)).
This comment wasn’t rated yet0
Я рассчитывал вы знаете литературу, в которой можно почитать на эту тему, я уверен там множество других интересных фактов имеется.
Субъективно-эмпирически проценты в прогрессбаре вообще совершенно никому ни о чем не говорят. Оставшееся время — более лучшая оценка.
А вообще прогрессбар — это то место в интерфейсе, которому требуеся наилучшая отрисовка, эффектность и оригинальность (если его длительность от 5 секунд хотя-бы и он модальный). Раз человеку приходится ждать — нужно сделать его ожидание захватывающим. Какие-нибудь советы в тему показывать, или отражать состояние прогресса работ, или просто хороший техдизайн, чтобы залипнуть. Немодальный прогресс-бар еще лучше.
Total votes 1: ↑0 and ↓1-1
Неужели в JS нельзя как-то более по-человечески работать с датами и временем? Куча if'ов малость выносит мозг и собственно отвелекает от самой работы с прогресс баром.
This comment wasn’t rated yet0
Можно было при каждой итерации вновь подсчитывать ms, days, hours, min, sec, как я первоначально и сделал. В этом случае никакой кучи if`ов. Но на мой взгляд, чем каждую итерация производить вычитание, деление и умножение достаточно больших чисел, экономичнее сделать это только один раз в самом начале, а затем просто вычитать по единичке из нужного «разряда», выбирая «разряд» при помощи этих if`ов.
This comment wasn’t rated yet0
В данном случае что вы потеряете? Пару тактов процессора? ;-) Это капля в море на фоне браузера. Поэтому я бы сделал код проще.
Total votes 1: ↑1 and ↓0+1
Как показывает практика, надежнее всё же вычислять прошедшее время при каждой итерации и подгонять под это анимацию. Если случается лаг (а он часто случается, например, в фф на тяжелых страницах), общее время анимации будет больше.
This comment wasn’t rated yet0
Эм… Простите, но так таймер нельзя писать вообще! Нет никакой гарантии, что пройдёт ровно 123 ms (т.е. заданный вами интервал). Более того, точно столько времени не пройдёт никогда. У вас получается, что время берётся как бы примерно. Вы хоть попробуйте засечь с часами, сколько проходит реально времени и сколько пишется у вас. Там разброс гигантский.

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

На каждом этапе нужно брать время и его проверять от стартового. Правда, там уже будут баги, если часы перевести и нужно это обходить.
Total votes 2: ↑2 and ↓0+2
Эмм, если часы перевести во время анимации? Довольно редкий случай, тестерам и в голову не придёт :)
This comment wasn’t rated yet0
Ну вот, в текущей реализации, если перевести часы в системе, то это непосредственно отражается на таймере — прыгает, становится отрицательным или сразу 100% :)
Честно говоря, не уверен, что это вообще можно обойти только лишь на одном клиенте в JS. Я не придумал как.
This comment wasn’t rated yet0
Что это за эпический пи@#ец?
А) Надо было оформить это ввиде виджета или хотя бы в виде плагина к JQuery.
Б) Что это за циферки в коде — живо менять их на переменные(констант же нет)
В) Что это за полотнище из if'ов?

Живо переписывать.
Total votes 14: ↑11 and ↓3+8
Живо перепиши!
Total votes 4: ↑2 and ↓20
На Хабре болтать — не мешки на спине тягать! ;-)
This comment wasn’t rated yet0
Исходный код и статья переписаны с учётом замечаний, указанных в 2х последних комментах. Спасибо их авторам…
This comment wasn’t rated yet0
Где-то читал, что специалисты UX Apple неспроста используют прогресс-бары, внутри которых узор движется в обратную сторону. Это создаёт у пользователя иллюзию непрерывного движения, даже если прогресс-бар стоит на месте, что, соответственно, уменьшает его раздражение на тему «ну когда же оно загрузится?!».

Рекомендую повернуть узор вспять.
Total votes 3: ↑3 and ↓0+3
Креативная идея
Apple
Теперь понятно, почему я подобного трюка не наблюдаю нигде, кроме продуктов яблочной компании. Не в обиду фанатам Apple, эта компания объективно патентует даже самые незначительные мелочи.
This comment wasn’t rated yet0
Поверьте) Порой это раздражает еще больше)
This comment wasn’t rated yet0
По мне так просто анимацию надо останавливать как только достигнуто 100%
This comment wasn’t rated yet0
Как только достигнуто 100% — прогресбар нужно убирать.
Total votes 2: ↑2 and ↓0+2
Наверняка это защищено каким-то из патентов apple, так что лучше этого не делать )
Total votes 1: ↑0 and ↓1-1
UFO just landed and posted this here
Кому нужно, тот все уберет ;-) это же опенсурс!
Total votes 2: ↑2 and ↓0+2
До завершения осталось ~ 0 дн. 00:00:0057.781 мс

Так писать некорректно. Если пишете время в формате 00:00:00.00, то не надо писать «мс», если пишете в милисекундах — пишите «57781 мс», если в секундах — «57.781 с».
Total votes 2: ↑2 and ↓0+2
Я использовал этот же прогресс-бар вместе со скриптом plupload (скрипт для загрузки файлов на сервер с очень гибкими настройками), получилось вот что: http://plupload.kece.ru/.
Total votes 1: ↑1 and ↓0+1
Возможно глючит флэшовый аплоадер. На боевой версии можно сделать проверку на тип браузера и для Хрома в качестве аплоадера использовать не флэш, а хтмл5.
This comment wasn’t rated yet0
UFO just landed and posted this here
По-человечески будет «Осталось 3 секунды» или «Осталось несколько секунд»
This comment wasn’t rated yet0
Весьма сомнительная реализация и визуализация. Не понимаю что эта статья делает на главной.
Total votes 3: ↑3 and ↓0+3
В большом проекте, где все эти библиотеки уже используются, может этот прогресс бар и подойдет, а так — 90КБ+ на прогресс бар — это сильно :)
Total votes 2: ↑2 and ↓0+2
Это ведь блог JQuery, так что jquery есть у всех.

А вот jquery ui на 210 KB это перебор — нужно было бы выбрать только обязательные модули. ui.core + ui.progressbar занимают примерно 12 kb, может еще 1-2 компоненты действительно нужны.
This comment wasn’t rated yet0
Научите этот прогрессбар красиво округлять до одного-двух разрядов. И зачем нужны «0 дн. 00:00:00», такое ведь лучше отсекать.
This comment wasn’t rated yet0
Кстати на тему прогрессбаров — иногда возникает необходимость сделать «бесконечный» прогрессбар. Тоесть такой, который вроде как и идет к 100%, но чем ближе к ним, тем медленнее, и в итоге до 100 никогда не доходит, а в пределе стремится например к 95 и только по определенному условию доползает до конца.

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

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

Кто нибудь знает уже готовый вариант подобного прогрессбара (лучше всего в виде jQuery плагина)?
This comment wasn’t rated yet0
Это не совсем то, что нужно. Если действие идет 100500 минут, и при этом не модальное и пользователь может уйти со страницы и потом вернуться на нее чтобы посмотреть как там прогресс?

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

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

Для этого крутилка не очень подходит хотя бы потому, что не известно когда ожидать окончание, если процесс запустил другой пользователь.
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time
Change theme settings

Your account

Sections

Information

Services

Support
© 2006–2024, Habr