Pixmora

Иконка таймера для отсчёта

Таймер Lucide с кнопкой сверху: длительность и обратный отсчёт. Не путать с циферблатом часов работы.

Как применить иконку «Секундомер»

Таймер Lucide с кнопкой сверху: длительность и обратный отсчёт. Не путать с циферблатом часов работы.

Сценарий страницы: Обратный отсчёт до конца сессии. Основной вариант - lucide:timer, набор Lucide, автор Lucide Contributors, лицензия ISC.

Секундомер (timer): Круг с кнопкой сверху и стрелкой внутри. Обратный отсчёт, интервал, лимит сессии.

Таймер выключен (timer-off): Таймер перечёркнут: отсчёт остановлен. Пауза или отключённый лимит времени.

Сброс (timer-reset): Стрелка возврата у таймера: начать заново. Кнопка «сбросить таймер» в интерфейсе.

Рядом с mm:ss обычно 16–20 px. На экране тренировки 32–48. Цифры не вшивайте в SVG.

Это пример разметки без тикающего JS. Обновление цифр подключите в проекте. Декоративное img с пустым alt; актуальное время держите в тексте. Путь к SVG замените.

Лицензия ISC: https://github.com/lucide-icons/lucide/blob/main/LICENSE. Полный текст лицензии добавляется в metadata скачиваемого SVG.

Файлы SVG

Стандартные SVG с полным текстом лицензии ISC в metadata. Отдельных страниц под размер и цвет нет. PNG с выбранным размером и цветом готовится в браузере и требует JavaScript.

Полный текст лицензии ISC

Пример разметки

Доступная подпись: Осталось 05:00. Имя файла в примере совпадает с основным вариантом; при смене варианта замените путь на скачанный файл.

<p aria-live="polite">
  <img src="lucide-timer.svg" width="20" height="20" alt="">
  <span>Осталось 05:00</span>
</p>

Частые вопросы

Почему не clock?

clock показывает время суток. timer подчёркивает отмеряемый интервал.

Нужна ли анимация стрелки?

Не обязательна. Главное - живые цифры рядом. Анимацию SVG, если нужна, добавляйте сами; статический файл её не содержит.