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

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

irbees2008 irbees2008 Опубликовано - 4 - октября Интерфейс
16342 - 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>
это первый вариант из исходника, я не стал вытаскивать стили для каждого варианта. На этом все ,смотрим исходники и источник,или задаём вопросы

Можешь почитать и вот эту статейку "Быстрый переход на страницу"

Опрос

Ваше мнение

TWIG -что это?
Результаты

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

Теги

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

Статистика

  • Caйту: 3327 дней
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 571
  • Онлайн всего: [13]
  • Гости: [12]
  • Поисковики: [1] Яндекс
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 33
  • Генерация страницы: 0.169сек
  • Потребление памяти: 4.937 Mb 
  •   яндекс.ћетрика