Хаки и Скрипты 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>

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

Можешь почитать и вот эту статейку "Выводим блок по времени на TWIG"

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

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