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

Новое на форуме Новые статьи Мини профиль
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
MUGEN WORKS - ANIME,CHARACTERS,STAGES,SCREENPACK,LIFEBAR » Технический раздел » Скрипты для uCoz » Анимированный Прогресс Бар
Анимированный Прогресс Бар
Manoichi
Дата: Вторник, 16.07.2013, 14:12 | Сообщение # 1


Достаточно красивый и приятный на взгляд 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;  
}


Это альтернативный вариант прогресс бару "artProjekt" Внешне чем-то похожий, но по структуре отличается.
MUGEN WORKS - ANIME,CHARACTERS,STAGES,SCREENPACK,LIFEBAR » Технический раздел » Скрипты для uCoz » Анимированный Прогресс Бар
  • Страница 1 из 1
  • 1
Поиск: