В этой записи, я хочу поделиться с вами плагином, с помощью которого можно установить стильный счетчик на ваш сайт.
Этот плагин прекрасно подойдет для страницы «Сайт временно не доступен», чтобы показать визуально пользователям сколько осталось ждать до открытия и тд.
Посмотреть демо | Скачать плагин
Установка счетчика
- Для начала вам нужно установить jQuery и скрипты счетчика. По этой ссылке вы можете скачать сам плагин. Устанавливает все скрипты перед
</body>
.<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/kinetic.js"></script> <script type="text/javascript" src="../jquery.final-countdown.js"></script>
- Далее вам нужно установить bootstrap 3 стили в голове вашего документа между —
<head></head>
.<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
- Счетчик использует следующую структуру HTML, лучше всего просто скопировать или взять из исходника плагина (на первом этапе была ссылка для скачки плагина).
<div class="countdown countdown-container container"> <div class="clock row"> <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3"> <div class="wrap"> <div class="inner"> <div id="canvas-days" class="clock-canvas"></div> <div class="text"> <p class="val">0</p> <p class="type-days type-time">ДНЕЙ</p> </div><!-- /.text --> </div><!-- /.inner --> </div><!-- /.wrap --> </div><!-- /.clock-item --> <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3"> <div class="wrap"> <div class="inner"> <div id="canvas-hours" class="clock-canvas"></div> <div class="text"> <p class="val">0</p> <p class="type-hours type-time">ЧАСОВ</p> </div><!-- /.text --> </div><!-- /.inner --> </div><!-- /.wrap --> </div><!-- /.clock-item --> <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3"> <div class="wrap"> <div class="inner"> <div id="canvas-minutes" class="clock-canvas"></div> <div class="text"> <p class="val">0</p> <p class="type-minutes type-time">МИНУТ</p> </div><!-- /.text --> </div><!-- /.inner --> </div><!-- /.wrap --> </div><!-- /.clock-item --> <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3"> <div class="wrap"> <div class="inner"> <div id="canvas-seconds" class="clock-canvas"></div> <div class="text"> <p class="val">0</p> <p class="type-seconds type-time">СЕКУНД</p> </div><!-- /.text --> </div><!-- /.inner --> </div><!-- /.wrap --> </div><!-- /.clock-item --> </div><!-- /.clock --> </div><!-- /.countdown-wrapper -->
- И теперь нужно добавить стили для HTML каркаса, чтобы он стал смотреться как должен.
.countdown-container { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } .clock-item .inner { height: 0px; padding-bottom: 100%; position: relative; width: 100%; } .clock-canvas { background-color: rgba(255, 255, 255, .1); border-radius: 50%; height: 0px; padding-bottom: 100%; } .text { color: #fff; font-size: 30px; font-weight: bold; margin-top: -50px; position: absolute; top: 50%; text-align: center; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); width: 100%; } .text .val { font-size: 50px; } .text .type-time { font-size: 20px; } @media (min-width: 768px) and (max-width: 991px) { .clock-item { margin-bottom: 30px; } } @media (max-width: 767px) { .clock-item { margin: 0px 30px 30px 30px; } }
На этом все. Если у вас есть какие-либо вопросы — не стесняйтесь задавать их в комментарии ниже.