Comments 56
Не хватает ссылки на рабочий пример. И «30.3400000%» — это нечеловеческий ужас.
Да и «осталось 0 дней» — не фонтан
Ну может быть… Просто если рассмотреть длительный промежуток времени (допустим год), то циферки будут бежать оч. медленно, а за счет такого количества чисел в дробной части создается иллюзия постоянного прироста…
Хотя количество цифр в дробной части — личное дело каждого. Их можно и уменьшить ;)
Хотя количество цифр в дробной части — личное дело каждого. Их можно и уменьшить ;)
Интересная доработка
Не могли бы вы демо показать?
Чтение такого количества кода и текста должно быть оправдано демкой.
Демка просто необходима, чтобы видеть результат, ради чего всё это писалось!
Демка просто необходима, чтобы видеть результат, ради чего всё это писалось!
Демка готова. Ссылка в конце поста…
UFO just landed and posted this here
cp1251 выставьте. Хром не переварил.
ps: мне не понятно в чем идея? +Слишком много кода для простого бегущего ползунка…
ps: мне не понятно в чем идея? +Слишком много кода для простого бегущего ползунка…
Ваше демо хотя бы работает,
а по ссылке автора у меня «Горящие туры по всему миру!»
а по ссылке автора у меня «Горящие туры по всему миру!»
Извиняюсь за «Горящие туры по всему миру!». Дело в том, что зарегистрировал бесплатный хостинг для этой демки, а там на страницы перед вставлялась огромная корявая реклама. Убрал её при помощи , видимо из-за этого мой аккаунт так быстро удалили. Ссылка уже изменена на рабочую.
Спасибо, если бы не картинки можно было бы использовать какой-нибудь http://pastehtml.com/
100% не бывает, 99.999 максимум.
Надо было просто отнаследоваться.
Замечание, которое можете счесть полезным: считается, что для человеческого мозга и 99.9% видов деятельности (кроме научно-математической) достаточно трёх значащих цифр. Так, если речь идёт о процентах, то значение имеет только одна цифра после запятой (50.5% или 5.05%). Причём, заметьте, это на высшей грани значимости. Для приблизительной оценки прогресса в данном случае достаточно и двух цифр (55% или 5.5%), из которых мозг всё равно округлит вообще до одной значащей цифры в соответствии с какой-нибудь субъективной шкалой этого мозга (50% и 5% соотв.). Поэтому 30.34000000% не имеет практического смысла, но создаёт текстовый и визуальный мусор.
Откуда информация, поделитесь)
Про три значащих цифры — едва ли не аксиома всего мира, который работает с цифрами (а, ну ещё кроме бухгалтеров, им важны все разряды чтоб дебит сходился с кредитом).
Про одну значащую цифру для приблизительной оценки прогресса — субъективно-эмипирически. Ну вот скажите, вам важна разница что проект на стадии 50.5% vs 50.6%? Или 50% vs 51%? Вы всё равно будете рассматривать это как «половину». А другие значения для оценки всё равно наложите на сетку 0-10-25-33-50-66-75-90-100% (доли 1/4, 1/3, 1/2, и края (стадии «ну, поехали» и «ещё неделя — и закончим»)).
Про одну значащую цифру для приблизительной оценки прогресса — субъективно-эмипирически. Ну вот скажите, вам важна разница что проект на стадии 50.5% vs 50.6%? Или 50% vs 51%? Вы всё равно будете рассматривать это как «половину». А другие значения для оценки всё равно наложите на сетку 0-10-25-33-50-66-75-90-100% (доли 1/4, 1/3, 1/2, и края (стадии «ну, поехали» и «ещё неделя — и закончим»)).
Я рассчитывал вы знаете литературу, в которой можно почитать на эту тему, я уверен там множество других интересных фактов имеется.
Субъективно-эмпирически проценты в прогрессбаре вообще совершенно никому ни о чем не говорят. Оставшееся время — более лучшая оценка.
А вообще прогрессбар — это то место в интерфейсе, которому требуеся наилучшая отрисовка, эффектность и оригинальность (если его длительность от 5 секунд хотя-бы и он модальный). Раз человеку приходится ждать — нужно сделать его ожидание захватывающим. Какие-нибудь советы в тему показывать, или отражать состояние прогресса работ, или просто хороший техдизайн, чтобы залипнуть. Немодальный прогресс-бар еще лучше.
Субъективно-эмпирически проценты в прогрессбаре вообще совершенно никому ни о чем не говорят. Оставшееся время — более лучшая оценка.
А вообще прогрессбар — это то место в интерфейсе, которому требуеся наилучшая отрисовка, эффектность и оригинальность (если его длительность от 5 секунд хотя-бы и он модальный). Раз человеку приходится ждать — нужно сделать его ожидание захватывающим. Какие-нибудь советы в тему показывать, или отражать состояние прогресса работ, или просто хороший техдизайн, чтобы залипнуть. Немодальный прогресс-бар еще лучше.
Неужели в JS нельзя как-то более по-человечески работать с датами и временем? Куча if'ов малость выносит мозг и собственно отвелекает от самой работы с прогресс баром.
Можно было при каждой итерации вновь подсчитывать ms, days, hours, min, sec, как я первоначально и сделал. В этом случае никакой кучи if`ов. Но на мой взгляд, чем каждую итерация производить вычитание, деление и умножение достаточно больших чисел, экономичнее сделать это только один раз в самом начале, а затем просто вычитать по единичке из нужного «разряда», выбирая «разряд» при помощи этих if`ов.
В данном случае что вы потеряете? Пару тактов процессора? ;-) Это капля в море на фоне браузера. Поэтому я бы сделал код проще.
Как показывает практика, надежнее всё же вычислять прошедшее время при каждой итерации и подгонять под это анимацию. Если случается лаг (а он часто случается, например, в фф на тяжелых страницах), общее время анимации будет больше.
Эм… Простите, но так таймер нельзя писать вообще! Нет никакой гарантии, что пройдёт ровно 123 ms (т.е. заданный вами интервал). Более того, точно столько времени не пройдёт никогда. У вас получается, что время берётся как бы примерно. Вы хоть попробуйте засечь с часами, сколько проходит реально времени и сколько пишется у вас. Там разброс гигантский.
Более того, функция setInterval не вызывает, когда страница не активна! Если перейти на другую вкладку и потом вернуться, то время останется старое (проверил в FF). А всё потому что вы просто отняли шаг при следующем вызове функции!
На каждом этапе нужно брать время и его проверять от стартового. Правда, там уже будут баги, если часы перевести и нужно это обходить.
Более того, функция setInterval не вызывает, когда страница не активна! Если перейти на другую вкладку и потом вернуться, то время останется старое (проверил в FF). А всё потому что вы просто отняли шаг при следующем вызове функции!
На каждом этапе нужно брать время и его проверять от стартового. Правда, там уже будут баги, если часы перевести и нужно это обходить.
Эмм, если часы перевести во время анимации? Довольно редкий случай, тестерам и в голову не придёт :)
Что это за эпический пи@#ец?
А) Надо было оформить это ввиде виджета или хотя бы в виде плагина к JQuery.
Б) Что это за циферки в коде — живо менять их на переменные(констант же нет)
В) Что это за полотнище из if'ов?
Живо переписывать.
А) Надо было оформить это ввиде виджета или хотя бы в виде плагина к JQuery.
Б) Что это за циферки в коде — живо менять их на переменные(констант же нет)
В) Что это за полотнище из if'ов?
Живо переписывать.
Исходный код и статья переписаны с учётом замечаний, указанных в 2х последних комментах. Спасибо их авторам…
Где-то читал, что специалисты UX Apple неспроста используют прогресс-бары, внутри которых узор движется в обратную сторону. Это создаёт у пользователя иллюзию непрерывного движения, даже если прогресс-бар стоит на месте, что, соответственно, уменьшает его раздражение на тему «ну когда же оно загрузится?!».
Рекомендую повернуть узор вспять.
Рекомендую повернуть узор вспять.
Креативная идея
AppleТеперь понятно, почему я подобного трюка не наблюдаю нигде, кроме продуктов яблочной компании. Не в обиду фанатам Apple, эта компания объективно патентует даже самые незначительные мелочи.
Поверьте) Порой это раздражает еще больше)
По мне так просто анимацию надо останавливать как только достигнуто 100%
Наверняка это защищено каким-то из патентов apple, так что лучше этого не делать )
UFO just landed and posted this here
До завершения осталось ~ 0 дн. 00:00:0057.781 мс
Так писать некорректно. Если пишете время в формате 00:00:00.00, то не надо писать «мс», если пишете в милисекундах — пишите «57781 мс», если в секундах — «57.781 с».
Так писать некорректно. Если пишете время в формате 00:00:00.00, то не надо писать «мс», если пишете в милисекундах — пишите «57781 мс», если в секундах — «57.781 с».
Я использовал этот же прогресс-бар вместе со скриптом plupload (скрипт для загрузки файлов на сервер с очень гибкими настройками), получилось вот что: http://plupload.kece.ru/.
Если в хроме открыть диалог и подождать то страница падает.
img688.imageshack.us/img688/295/selection083.png
img688.imageshack.us/img688/295/selection083.png
UFO just landed and posted this here
Весьма сомнительная реализация и визуализация. Не понимаю что эта статья делает на главной.
В большом проекте, где все эти библиотеки уже используются, может этот прогресс бар и подойдет, а так — 90КБ+ на прогресс бар — это сильно :)
Научите этот прогрессбар красиво округлять до одного-двух разрядов. И зачем нужны «0 дн. 00:00:00», такое ведь лучше отсекать.
Кстати на тему прогрессбаров — иногда возникает необходимость сделать «бесконечный» прогрессбар. Тоесть такой, который вроде как и идет к 100%, но чем ближе к ним, тем медленнее, и в итоге до 100 никогда не доходит, а в пределе стремится например к 95 и только по определенному условию доползает до конца.
Это надо например при длительных операциях на стороне сервера, если не известно точно когда он закончится. В этом случае можно только предположить примерное время окончания, а все что больше — делать вид что так и должно быть :)
Наглядный пример — прогрессбар в тимсити, где они показывают овертайм по сравнению с предыдущими запусками.
Кто нибудь знает уже готовый вариант подобного прогрессбара (лучше всего в виде jQuery плагина)?
Это надо например при длительных операциях на стороне сервера, если не известно точно когда он закончится. В этом случае можно только предположить примерное время окончания, а все что больше — делать вид что так и должно быть :)
Наглядный пример — прогрессбар в тимсити, где они показывают овертайм по сравнению с предыдущими запусками.
Кто нибудь знает уже готовый вариант подобного прогрессбара (лучше всего в виде jQuery плагина)?
Зачем изобретать велосипед? Уместнее использовать «крутилку»
http://www.ajaxload.info/
http://www.ajaxload.info/
Это не совсем то, что нужно. Если действие идет 100500 минут, и при этом не модальное и пользователь может уйти со страницы и потом вернуться на нее чтобы посмотреть как там прогресс?
Например на стороне сервера идет распаковка большого архива, и при этом известно, что архив такого же размера распаковывался в прошлый раз 15 минут.
— Во первых пользователь может нажать «начинай распаковку» и уйти смотреть другие страницы, а потом вернуться и посмотреть на сколько операция завершена
— Во вторых мы не знаем точно содержимое архива, и не можем сказать точно сколько это займет времени, но сильно врать пользователю тоже не хочется.
ЗЫЖ пример с архивом, конечно, выдуманный. однако в решаемой задаче это выглядело примерно так:
— распаковать архив
— перенести нужные файлики по местам
— запустить sql процедуры (тоже количество данных может быть не маленьким)
— настроить что-нибудь в системе (если права есть)
— радостно сообщить пользователю, что где-то по пути все упало
Для этого крутилка не очень подходит хотя бы потому, что не известно когда ожидать окончание, если процесс запустил другой пользователь.
Например на стороне сервера идет распаковка большого архива, и при этом известно, что архив такого же размера распаковывался в прошлый раз 15 минут.
— Во первых пользователь может нажать «начинай распаковку» и уйти смотреть другие страницы, а потом вернуться и посмотреть на сколько операция завершена
— Во вторых мы не знаем точно содержимое архива, и не можем сказать точно сколько это займет времени, но сильно врать пользователю тоже не хочется.
ЗЫЖ пример с архивом, конечно, выдуманный. однако в решаемой задаче это выглядело примерно так:
— распаковать архив
— перенести нужные файлики по местам
— запустить sql процедуры (тоже количество данных может быть не маленьким)
— настроить что-нибудь в системе (если права есть)
— радостно сообщить пользователю, что где-то по пути все упало
Для этого крутилка не очень подходит хотя бы потому, что не известно когда ожидать окончание, если процесс запустил другой пользователь.
Sign up to leave a comment.
Интересный прогресс-бар