Piecon — динамическая круговая диаграмма в фавиконе


    Крошечная (2 килобайта в минифицированном виде) JavaScript-библиотека Piecon генерирует круговую диаграмму на месте фавикона. API предельно прост и состоит из трёх методов объекта Piecon.

    Метод reset() не имеет аргументов и просто сбрасывает счётчик, setProgress() принимает один аргумент — процент заполненности круговой диаграммы, а setOptions() требует объект с базовыми настройками фавикона:

    Piecon.setOptions({
      color: '#ff0084', // Основной цвет
      background: '#bbb', // Цвет фона диаграммы
      shadow: '#fff', // цвет обрамления
      fallback: false // Отображение процентов в заголовке (возможные значения - true, false, 'force')
    });
    


    Совместимость с браузерами:
    • Chrome 15+
    • Firefox 9+
    • Opera 11+


    В IE и Safari пока реализован только текстовый отсчёт (библиотеке всего месяц от роду). Источником вдохновения для Piecon послужил анимированный счётчик Tinycon. Посмотреть демо можно здесь.

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 13

      +5
      Здорово, можно было бы очень удачно использовать на многих сайтов как, например, индикатор загрузки контента — тогда не придется каждый раз переключаться на вкладку, чтобы посмотреть как идут дела.
        0
        Фавикон может быть очень полезен.
        У себя сделал для музыки вот так
        image
        Помоему, более чем. Так как нужно еще не только это выводить туда, использую jQuery Favicon plugin.
        0
        Мне нравится как он работает, но не могу придумать полезного применения.
        Демка в Хроме, например, включается только после того, как перестает крутиться стандартный, браузерный кружочек загрузки — следовательно для отображения загрузки контента оно не подойдет.
          +4
          Так стандартный кружочек вам и так видно, он и показывает, что процесс еще идет.
          А эта штука для контента, загружаемого асинхронно, после загрузки страницы.
            0
            Да. И правда. Туплю. Спасибо :)
          +1
          Очень удобно для отображения хода загрузки файлов на сервер через веб интерфейс или процесса конвертации файлов или еще чего, работающего через веб интерфейс.
            0
            Нашёл странное поведение плагина.
            Демка в Хроме, да и в FF на открытой вкладке показывает заполнение диаграммы быстро, как и прописано в сценарии проценты увеличиваются за 250мс, а на неактивной — раза в 4 медленно, по секунде каждый новый %.

            Понимаю что тут дело скорее всего не в самой библиотеке Piecon, а в какой-то реализации активности-неактивности и поведении setInterval, но кажется это странно, есть у кого идеи почему так?
              +2
              Может быть, это экономия ресурсов за счет неактивных вкладок?
                0
                Возможно, но поведение setInterval получается не совсем логичным, ведь ему точно указали через какое время срабатывать. Причем такое дело именно на неактивной вкладке, если страница видна, но фокус на другом приложении — то счетчик работает нормально.
              0
              Спасибо за плагин. Как идея: было бы просто супер иметь один общий плагин для различных индикаций в фавиконке.
                0
                А для сафари это реально? Насколько мне известно, в сафари с фавиконами всегда было «строго».
                  0
                  И в хроме, и в лисе, есть глюк — когда вкладка неактивна, вы не можете менять favicon чаще раза в секунду.
                  Как исправят — начнётся веселуха.
                    +1
                    Это не баг, это фича. Для фоновых процессов тики таймера замедлены примерно на порядок.

                  Only users with full accounts can post comments. Log in, please.