04 Oct 2015, 17:58 08 May 2016, 23:56 avatar

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

Интерфейс
  1. Автор: Rafael González
  2. Адаптировал: irbees2008
  3. Источник: http://tympanus.net/codrops/2015/09/30/shaded-progress-bars-css-sass-excercise/
  4. Уровень сложности исполнения:нужны навыки css html
  5. Демо: в новом окне

Сегодня познакомлю вас с обалденными 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>
это первый вариант из исходника, я не стал вытаскивать стили для каждого варианта. На этом все ,смотрим исходники и источник,или задаём вопросы
Можешь почитать и вот эту статейку "Советы как бесплатно раскрутить свой сайт"

mistakes

Похожие новости

0 комментариев

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