Анимированный Прогресс Бар - MUGEN WORKS - ANIME,CHARACTERS,STAGES,SCREENPACK,LIFEBAR

Файлы: 857 Видео: 13 Комментарии: 243 Статьи: 306 Новости: 155 Форум: 39179 Пользователи: 3408 + 0 |Добавить на сайт ...

Новое на форуме Новые статьи Мини профиль

119way-Apollo

Nameless

Naomi KOF

119way-kula

[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Анимированный Прогресс Бар

Manoichi

Дата: Вторник, 16.07.2013, 14:12 | Сообщение # 1

Легенда
5095Сообщений:
4 +Награды:

Достаточно красивый и приятный на взгляд Progress Bar с небольшой анимацией.

Код для вставки бара состоит из трех частей. Первая часть, это фоновая полоса, вторая часть, сам индикатор, и третья часть, бар показывающий количество процентов.

Код

Стиль к бару будет таким:

Код

.progressbar {
  position: relative;
  height: 24px;
  width: 400px;
  border: 1px solid #222;
  background: #1c1c1c;
  border-radius: 2px;
  -o-border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  box-shadow: 0px 1px 7px #000;
}

.progressbar .blue {
  height: 26px;
  background: url(./1.png) , url(./2.gif);
  overflow: hidden;
  margin: -1px;
  border-radius: 2px;
  -o-border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -webkit-transition: all 380ms;
  -moz-transition: all 380ms;
  -o-transition: all 380ms;
  transition: all 380ms;
  box-shadow: inset 0px 1px 0px rgba( 255, 255, 255, 0.1);
}

.progressbar span {
  display: block; width: 100%;
  text-align: center;
  font-size: 13px; font-family: Tahoma, Arial; font-weight: bold;
  color: #eee;
  text-shadow: 0px 1px 0px #333;
  position: absolute; top: 0;
  line-height: 24px;
}

Это альтернативный вариант прогресс бару "artProjekt" Внешне чем-то похожий, но по структуре отличается.