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

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

irbees2008 irbees2008 Опубликовано - 3 - января Интерфейс
3269 - 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.Можно использовать для плагина опросов,рейтинга .

Можешь почитать и вот эту статейку "Интересный HOVER эффект"

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

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

Обновленное

Теги

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

Статистика

  • Caйту: 3297 дней
  • Новостей: 539
  • Комменты: 252
  • Зарегистрированно : 569
  • Онлайн всего: [9]
  • Гости: [9]
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 34
  • Генерация страницы: 0.134сек
  • Потребление памяти: 4.937 Mb 
  •   яндекс.ћетрика