<div class="container">
  
  <h1>BLACK HAWKS #77 Kirby Dach</h1>

  <input type="radio" class="radio" name="progress" value="zero" id="zero" checked>
  <label for="zero" class="label half">5</label>
  
  <input type="radio" class="radio" name="progress" value="" id="ten">
  <label for="ten" class="label">10</label>

  <input type="radio" class="radio" name="progress" value="ten-half" id="ten-half">
  <label for="ten-half" class="label half">5</label>

  <input type="radio" class="radio" name="progress" value="twenty" id="twenty">
  <label for="twenty" class="label">20</label>
  
  <input type="radio" class="radio" name="progress" value="twenty-half" id="twenty-half">
  <label for="twenty-half" class="label half">5</label>

  <input type="radio" class="radio" name="progress" value="thirty" id="thirty">
  <label for="thirty" class="label">30</label>
  
  <input type="radio" class="radio" name="progress" value="thirty-half" id="thirty-half">
  <label for="thirty-half" class="label half">5</label>

  <input type="radio" class="radio" name="progress" value="fourty" id="fourty">
  <label for="fourty" class="label">40</label>
  
  <input type="radio" class="radio" name="progress" value="fourty-half" id="fourty-half">
  <label for="fourty-half" class="label half">5</label>

  <input type="radio" class="radio" name="progress" value="fifty" id="fifty">
  <label for="fifty" class="label">50</label>
  
  <input type="radio" class="radio" name="progress" value="fifty-half" id="fifty-half">
  <label for="fifty-half" class="label half">5</label>

  <input type="radio" class="radio" name="progress" value="sixty" id="sixty">
  <label for="sixty" class="label">60</label>
  
  <input type="radio" class="radio" name="progress" value="sixty-half" id="sixty-half">
  <label for="sixty-half" class="label half">5</label>

  <input type="radio" class="radio" name="progress" value="seventy" id="seventy">
  <label for="seventy" class="label">70</label>
  
  <input type="radio" class="radio" name="progress" value="seventy-half" id="seventy-half">
  <label for="seventy-half" class="label half">5</label>
  
  <input type="radio" class="radio" name="progress" value="eighty" id="eighty">
  <label for="eighty" class="label">80</label>
  
  <input type="radio" class="radio" name="progress" value="eighty-half" id="eighty-half">
  <label for="eighty-half" class="label half">5</label>
  
  <input type="radio" class="radio" name="progress" value="ninety" id="ninety">
  <label for="ninety" class="label">90</label>
  
  <input type="radio" class="radio" name="progress" value="ninety-half" id="ninety-half">
  <label for="ninety-half" class="label half">5</label>

  <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
  <label for="onehundred" class="label">100</label>

  <div class="progress">
    <div class="progress-bar"></div>
  </div>
</div>
/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 * Licensed under the MIT License
 *
 * Sass/SCSS source: https://goo.gl/UhXKg
 * PSD by Vin Thomas: https://goo.gl/n1M2e
 */

body {
  font: 18px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #2a2a2a;
}

h1 {
  color: #ccc;
  text-align: center;
  font-size: 40px;
  margin-bottom: 30px;
}

input {
  text-align: center;
  font-size: 24px;
  margin: 0 5px 30px;
  
    background-color: #aaa;
    border: none;
    border-radius: 10px;
}

.container {
  margin: 60px auto;
  width: 60%;
  text-align: left;
}

.radio {
  display: none;
}

.half {
  font-size: 14px;
  color: #7c7c7c;
}

.label {
  display: inline-block;
  margin: 0 0 20px 0;
  padding: 5px 0;
  width: 52px;
  color: #aaa;
  text-shadow: 0 1px black;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
}

.radio:checked + .label {
  color: white;
  background: rgba(0, 0, 0, 0.25);
}

.progress {
  margin: 0 auto;
  margin-left: -3%;
  width: 100%;
}

.progress {
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {
  height: 30px;
  border-radius: 4px;
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       https://css-tricks.com/webkit-sibling-bug/
 */

#zero:checked ~ .progress > .progress-bar {
  width: 5%;
  background-color: #f21111;
}

#ten:checked ~ .progress > .progress-bar {
  width: 10%;
  background-color: #f21111;
}

#ten-half:checked ~ .progress > .progress-bar {
  width: 15%;
  background-color: #f21111;
}

#twenty:checked ~ .progress > .progress-bar {
  width: 20%;
  background-color: #f23711;
}

#twenty-half:checked ~ .progress > .progress-bar {
  width: 25%;
  background-color: #f23711;
}

#thirty:checked ~ .progress > .progress-bar {
  width: 30%;
  background-color: #f25c11;
}

#thirty-half:checked ~ .progress > .progress-bar {
  width: 35%;
  background-color: #f25c11;
}

#fourty:checked ~ .progress > .progress-bar {
  width: 40%;
  background-color: #f28211;
}

#fourty-half:checked ~ .progress > .progress-bar {
  width: 45%;
  background-color: #f28211;
}

#fifty:checked ~ .progress > .progress-bar {
  width: 50%;
  background-color: #f2a711;
}

#fifty-half:checked ~ .progress > .progress-bar {
  width: 55%;
  background-color: #f2a711;
}

#sixty:checked ~ .progress > .progress-bar {
  width: 60%;
  background-color: #f2cc11;
}

#sixty-half:checked ~ .progress > .progress-bar {
  width: 65%;
  background-color: #f2cc11;
}

#seventy:checked ~ .progress > .progress-bar {
  width: 70%;
  background-color: #f2f211;
}

#seventy-half:checked ~ .progress > .progress-bar {
  width: 75%;
  background-color: #f2f211;
}

#eighty:checked ~ .progress > .progress-bar {
  width: 80%;
  background-color: #cdf211;
}

#eighty-half:checked ~ .progress > .progress-bar {
  width: 85%;
  background-color: #cdf211;
}

#ninety:checked ~ .progress > .progress-bar {
  width: 90%;
  background-color: #a7f211;
}

#ninety-half:checked ~ .progress > .progress-bar {
  width: 95%;
  background-color: #a7f211;
}

#onehundred:checked ~ .progress > .progress-bar {
  width: 100%;
  background-color: #82f211;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.