Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Прогресс бары с помощью CSS Категория: CSS
Название: Прогресс бары с помощью CSS
Дата добавления: 06-07-2012
Раз просмотрено: 2949
Комментарии: 3
Рейтинг: * * * * * * * * * * (4 голоса)

Прогресс бары с помощью CSS

Прогресс бары в наше время используются на сайтах все чаще и чаще. Они могут служить индикаторами загрузки или показывать оставшиеся шаги до окончания регистрации. В этой статье вы найдете пять изумительных CSS3 техник для создания красивых прогресc баров. Мы будем использовать только стили, без применения изображений.

После применения классов, описанных в этом уроке вы получите вот такие прогресс бары. Обратите внимание, что последний прогресс бар является анимированным. Демо вы можете посмотреть на этой странице.

Прогресс бары с помощью CSS

HTML

HTML разметка наших прогресс баров предельно проста — блок с обязательным классом bar, внутри которого находится <span>, которому мы будем задавать ширину прогресс бара:

<div class="bar">
  <span style="width: 50%;"></span>
</div>

Кроме класса bar, мы будем присваивать блоку один или несколько других классов. Например класс gradient создает градиентный прогресс бар, gloss — блестящий, stripes — с полосками (его хорошо совмещать с gradient), animate — анимированный (его обязательно нужно совмещать с классом stripes и желательно с gradient). Ниже будут приведены CSS коды для каждого класса.

Базовый CSS

.bar {
	margin: 5px 0 3px;
	border: 6px solid #333;
	background: #333;
	overflow: hidden;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	box-shadow: 1px 1px 1px #777;
	-moz-box-shadow: 1px 1px 1px #777;
	-webkit-box-shadow: 1px 1px 1px #777;
}
.bar span {
	display: block;
	height: 20px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: #FF9932;
}

Градиентный прогресс бар

.gradient span {
	box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;
	-moz-box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset,	0 -5px 7px rgba(0, 0, 0, 0.4) inset;
	-webkit-box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33ffffff', endColorstr='#33000000', GradientType=0);
	background-color: #90EE90;
}

Блестящий прогресс бар

.gloss span {
	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(45%,rgba(255,255,255,0.1)), color-stop(55%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%);
	background-image: -o-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%);
	background-image: -ms-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%);
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 45%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.1) 100%);
	background-color: #DBF043;
}

Полосатый прогресс бар

.stripes span {
	background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	-webkit-background-size: 30px 30px;
	-o-background-size: 30px 30px;

	background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(25%,rgba(255,255,255,0.2)), color-stop(25%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.2)), color-stop(75%,rgba(255,255,255,0.2)), color-stop(75%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
	background-image: -o-linear-gradient(-45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
	background-image: -ms-linear-gradient(-45deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
	background-image: linear-gradient(135deg,  rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
	background-color: #4169E1;
}

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

.animate span {
	background-color: #D76ED3;
	animation: progress 3s linear infinite;
	-moz-animation: progress 3s linear infinite;
	-webkit-animation: progress 3s linear infinite;
	-ms-animation: progress 3s linear infinite;
	-o-animation: progress 3s linear infinite;
}
@-webkit-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}
@-moz-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}
@-ms-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}
@-o-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}
@keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}

Это интересно: «Генератор случайного текста».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Гость  •  2014-01-16 03:13:40
К сожалению не работает(( кроме первой
Гость  •  2014-01-24 18:15:05
Просто кто то пользоваться не умеет.. всё норм работает.
Гость  •  2014-01-24 18:15:17
Просто кто то пользоваться не умеет.. всё норм работает.