Progress bar

Default Style
Photoshop
HTML/CSS
Wordpress
<div class="progress">
  <div class="progress-bar" data-percentage="80" style="width: 0%;">
    <span class="skills-name pull-left">Photoshop</span>
    <span class="skills-percentage pull-right"></span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar" data-percentage="85" style="width: 0%;">
    <span class="skills-name pull-left">HTML/CSS</span>
    <span class="skills-percentage pull-right"></span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar" data-percentage="65" style="width: 0%;">
    <span class="skills-name pull-left">Wordpress</span>
    <span class="skills-percentage pull-right"></span>
  </div>
</div>
Style 1

.progress-style1


Photoshop
HTML/CSS
Wordpress
<div class="progress progress-style1">
  <div class="progress-bar" data-percentage="80" style="width: 0%;">
    <span class="skills-name pull-left">Photoshop</span>
    <span class="skills-percentage pull-right"></span>
  </div>
</div>

<div class="progress progress-style1">
  <div class="progress-bar" data-percentage="85" style="width: 0%;">
    <span class="skills-name pull-left">HTML/CSS</span>
    <span class="skills-percentage pull-right"></span>
  </div>
</div>

<div class="progress progress-style1">
  <div class="progress-bar" data-percentage="65" style="width: 0%;">
    <span class="skills-name pull-left">Wordpress</span>
    <span class="skills-percentage pull-right"></span>
  </div>
</div>
Style 2

.progress-style2


Photoshop
HTML/CSS
Wordpress
<div class="progress progress-style2">
  <div class="progress-bar" data-percentage="80" style="width: 0%;">
    <span class="skills-name pull-left">Photoshop</span>
    <span class="skills-percentage pull-right"></span>
  </div>
</div>

<div class="progress progress-style2">
  <div class="progress-bar" data-percentage="85" style="width: 0%;">
    <span class="skills-name pull-left">HTML/CSS</span>
    <span class="skills-percentage pull-right"></span>
  </div>
</div>

<div class="progress progress-style2">
  <div class="progress-bar" data-percentage="65" style="width: 0%;">
    <span class="skills-name pull-left">Wordpress</span>
    <span class="skills-percentage pull-right"></span>
  </div>
</div>
Style 3

.progress-style3


Photoshop
HTML/CSS
Wordpress
<div class="progress progress-style3">
  <div class="progress-bar" data-percentage="80" style="width: 0%;">
    <span class="skills-name pull-left">Photoshop</span>
    <span class="skills-percentage pull-right"></span>
  </div>
</div>

<div class="progress progress-style3">
  <div class="progress-bar" data-percentage="85" style="width: 0%;">
    <span class="skills-name pull-left">HTML/CSS</span>
    <span class="skills-percentage pull-right"></span>
  </div>
</div>

<div class="progress progress-style3">
  <div class="progress-bar" data-percentage="65" style="width: 0%;">
    <span class="skills-name pull-left">Wordpress</span>
    <span class="skills-percentage pull-right"></span>
  </div>
</div>
Цветовая схема


Свой цвет
Выбрать цвет
Ширина сайта
Хлебные крошки
Для разработчиков