Bootstrap progresss bars with buttons

These buttons change the values of the progress bars. All responsive.

by Sub Lines

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<div class="progress progress active">
    <div class="progress-bar" id="photoshop" style="width:80%">
      Photoshop
    </div>
  </div>

  <div class="progress progress active">
    <div class="progress-bar" id="indesign" style="width:90%">
      InDesign
    </div>
  </div>

  <div class="progress progress active">
    <div class="progress-bar" id="illustrator" style="width:70%">
      Illustrator
    </div>
  </div>

  <div class="progress progress active">
    <div class="progress-bar" id="after" style="width:50%">
      After Effects
    </div>
  </div>

  <div class="progress progress active">
    <div class="progress-bar" id="premiere" style="width:70%">
      Premiere Pro
    </div>
  </div>

  <div class="progress progress active">
    <div class="progress-bar" id="brackets" style="width:60%">
      Brackets
    </div>
  </div>

  <div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group" role="group">
      <button id="illus" type="button" class="btn btn-default">Illustrations</button>
    </div>

    <div class="btn-group" role="group">
      <button id="typo" type="button" class="btn btn-default">Editorial Design</button>
    </div>

    <div class="btn-group" role="group">
      <button id="web" type="button" class="btn btn-default">Web &amp; UI Design</button>
    </div>
  </div>

  <div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group" role="group">
      <button id="motion" type="button" class="btn btn-default">Motion Design</button>
    </div>

    <div class="btn-group" role="group">
      <button id="video" type="button" class="btn btn-default">Video Art</button>
    </div>

   ...

CSS

AS USED ON jaschagoltermann.de

JavaScript

jQuery(function($) {
    $('#illus').click(function() {
            var phs = 80 + '%';
            var ind = 50 + '%';
            var ill = 100 + '%';
            var afe = 30 + '%';
            var prp = 20 + '%';
            var bra = 60 + '%';
            $('#photoshop').width(phs),
                $('#indesign').width(ind),
                $('#illustrator').width(ill),
                $('#after').width(afe),
                $('#premiere').width(prp),
                $('#brackets').width(bra)
        }),
        $('#typo').click(function() {
            var phs = 60 + '%';
            var ind = 100 + '%';
            var ill = 80 + '%';
            var afe = 60 + '%';
            var prp = 40 + '%';
            var bra = 60 + '%';
            $('#photoshop').width(phs),
                $('#indesign').width(ind),
                $('#illustrator').width(ill),
                $('#after').width(afe),
                $('#premiere').width(prp),
                $('#brackets').width(bra)
        }),
        $('#web').click(function() {
            var phs = 90 + '%';
            var ind = 50 + '%';
            var ill = 80 + '%';
            var afe = 30 + '%';
            var prp = 10 + '%';
            var bra = 100 + '%';
            $('#photoshop').width(phs),
                $('#indesign').width(ind),
                $('#illustrator').width(ill),
                $('#after').width(afe),
                $('#premiere').width(prp),
                $('#brackets').width(bra)
        }),
        $('#motion').click(function() {
            var phs = 50 + '%';
            var ind = 0 + '%';
            var ill = 60 + '%';
            var afe = 100 + '%';
            var prp = 80 + '%';
            var bra = 40 + '%';
            $('#photoshop').width(phs),
                $('#indesign').width(ind),
                $('#illustrator').width(ill),
                $('#after').width(afe),
                $('#premiere').width(prp),
                $('#brackets').width(bra)
   ...