Сайт ищет нового владельца по разумной цене :) По всем вопросам: promonik1@ya.ru, skype: nik-luck007, https://vk.com/promonik
2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии

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

Скрипты для uCoz 2013-Янв-15 artCreative 2.2k 2

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

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

<div id="formblock">  
  <div class="progressbar">  
  <div style="width: 65%;" class="blue"></div>  
  <span id="schet">65%</span>  
  </div>  
</div>  

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

.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;  
}  
Источник: http://aspekt.ucoz.net/publ/skripty/
2 комментария
avatar
1
мда... пошла мания на эти прогресс-бары.
avatar
2
....может кому - то он и необходим! Почему "пошла мания"?
avatar