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

Аннимированный 3D прогресс бар на CSS3

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


Сегодня познакомлю вас с обалденными 3D эффектами для прогресс баров.Можно использовать для голосований, индикаторов загрузки. Они довольно эффектны и обращают внимание на себя.Установка проста .
Итак приступим.
1. Скачиваем исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем стили component.css и custom-bars.css в папку со стилями вашего шаблона.
2. Подключаем стили в хеад main.tpl

Код:
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/custom-bars.css" />
3.Ну и сам код нашего бара,ставим там где нам нужно
Код:
<div class="progress-bar">
<div class="bar has-rotation has-colors navy ruler" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" id="bar-0_0">
<div class="tooltip white"></div>
<div class="bar-face face-position roof percentage"></div>
<div class="bar-face face-position back percentage"></div>
<div class="bar-face face-position floor percentage volume-lights"></div>
<div class="bar-face face-position left"></div>
<div class="bar-face face-position right"></div>
<div class="bar-face face-position front percentage volume-lights shine"></div>
</div>
</div>
это первый вариант из исходника, я не стал вытаскивать стили для каждого варианта. На этом все ,смотрим исходники и источник,или задаём вопросы

Можешь почитать и вот эту статейку "Установка ,настройка плагина basket - "корзина заказа""

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

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

Теги

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

Статистика

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