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

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

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

Можешь почитать и вот эту статейку "Слайдер контента SlideJS на jQuery"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

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

Теги

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

Статистика

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