Хаки и Скрипты Next Generation CMS

Анимированный прогресс бар для вашего сайта

irbees2008 irbees2008 Опубликовано - 3 - января Интерфейс
4462 - 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Вот присмотрел довольно интересный вариант анимированного прогресс бара,его можно подключить в опросы,рейтинг.
Ну и сейчас я распишу его структуру .
Итак приступим.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем папку CSS и IMG в папку нашего шаблона.
2.В файле main.tpl в head подключаем файл стиля

Код:
<link rel="stylesheet" href="{{ tpl_url }}css/style.css">
3.Ну и сам демо пример кода
Код:
<input type="radio" class="radio" name="progress" value="five" id="five">
<label for="five" class="label">5%</label>

<input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
<label for="twentyfive" class="label">25%</label>

<input type="radio" class="radio" name="progress" value="fifty" id="fifty">
<label for="fifty" class="label">50%</label>

<input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
<label for="seventyfive" class="label">75%</label>

<input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
<label for="onehundred" class="label">100%</label>

<div class="progress">
<div class="progress-bar"></div>
</div>
4.Можно использовать для плагина опросов,рейтинга .

Можешь почитать и вот эту статейку "Fancy зум с JQuery или Mootools"

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4374 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [7]
  • Гости: [7]
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 34
  • Генерация страницы: 0.306сек
  • Потребление памяти: 5.161 Mb 
  •   Яндекс.Метрика