Хаки и Скрипты Next Generation CMS : Интерфейс, Варианты рейтинга, CSS, Разное : Аннимированный 3D прогресс бар на CSS3

irbees2008 Опубликовано - 4 - октября Интерфейс

Автор: 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>

это первый вариант из исходника, я не стал вытаскивать стили для каждого варианта. На этом все ,смотрим исходники и источник,или задаём вопросы

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

Это тоже интересно

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