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

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

Шаг 1. HTML

Для начала подключите библиотеку jQuery к вашему документу, если у вас уже есть такая библиотека, то не стоит дублировать, иначе не будет работать:

Также мы подключили плагин, который будет отвечать за работу таймера обратного отсчета, идем дальше:

Затем создали разметку Html для таймера обратного отсчета, используя неупорядоченный список.

Шаг 2. CSS

Добавляем следующие фрагменты CSS для красивого отображения таймера:

Шаг 3. JS

Теперь же инициализируем таймер и указываем дату до какой надо считать таймеру, также можете присвоить текстовое уведомление которое отобразится по окончанию времени:

По умолчанию плагин имеет следующие настройки:

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

Вот и все. Готово!