css-progress-pie/css/progress_pie_unicorn.css

/* CSS Progress Pie by Olivia Ng | MIT License | github.com/oliviale/css-progress-pie*/
/* For site examples - ignore */
.progress-pie-unicorn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #eee;
  position: relative;
  display: inline-block;
}

.progress-pie-unicorn::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
}

.progress-pie-unicorn::after {
  content: attr(data-value);
  position: absolute;
  width: 70%;
  height: 70%;
  margin: auto;
  border-radius: 50%;
  background-color: #fff;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  font: 900 20px/41px Tahoma;
}

.progress-pie-unicorn[data-value="0"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="0"]:before {
  -webkit-transform: rotate(0turn);
      -ms-transform: rotate(0turn);
          transform: rotate(0turn);
}

.progress-pie-unicorn[data-value="1"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="1"]:before {
  -webkit-transform: rotate(0.01turn);
      -ms-transform: rotate(0.01turn);
          transform: rotate(0.01turn);
}

.progress-pie-unicorn[data-value="2"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="2"]:before {
  -webkit-transform: rotate(0.02turn);
      -ms-transform: rotate(0.02turn);
          transform: rotate(0.02turn);
}

.progress-pie-unicorn[data-value="3"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="3"]:before {
  -webkit-transform: rotate(0.03turn);
      -ms-transform: rotate(0.03turn);
          transform: rotate(0.03turn);
}

.progress-pie-unicorn[data-value="4"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="4"]:before {
  -webkit-transform: rotate(0.04turn);
      -ms-transform: rotate(0.04turn);
          transform: rotate(0.04turn);
}

.progress-pie-unicorn[data-value="5"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="5"]:before {
  -webkit-transform: rotate(0.05turn);
      -ms-transform: rotate(0.05turn);
          transform: rotate(0.05turn);
}

.progress-pie-unicorn[data-value="6"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="6"]:before {
  -webkit-transform: rotate(0.06turn);
      -ms-transform: rotate(0.06turn);
          transform: rotate(0.06turn);
}

.progress-pie-unicorn[data-value="7"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="7"]:before {
  -webkit-transform: rotate(0.07turn);
      -ms-transform: rotate(0.07turn);
          transform: rotate(0.07turn);
}

.progress-pie-unicorn[data-value="8"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="8"]:before {
  -webkit-transform: rotate(0.08turn);
      -ms-transform: rotate(0.08turn);
          transform: rotate(0.08turn);
}

.progress-pie-unicorn[data-value="9"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="9"]:before {
  -webkit-transform: rotate(0.09turn);
      -ms-transform: rotate(0.09turn);
          transform: rotate(0.09turn);
}

.progress-pie-unicorn[data-value="10"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="10"]:before {
  -webkit-transform: rotate(0.1turn);
      -ms-transform: rotate(0.1turn);
          transform: rotate(0.1turn);
}

.progress-pie-unicorn[data-value="11"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="11"]:before {
  -webkit-transform: rotate(0.11turn);
      -ms-transform: rotate(0.11turn);
          transform: rotate(0.11turn);
}

.progress-pie-unicorn[data-value="12"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="12"]:before {
  -webkit-transform: rotate(0.12turn);
      -ms-transform: rotate(0.12turn);
          transform: rotate(0.12turn);
}

.progress-pie-unicorn[data-value="13"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="13"]:before {
  -webkit-transform: rotate(0.13turn);
      -ms-transform: rotate(0.13turn);
          transform: rotate(0.13turn);
}

.progress-pie-unicorn[data-value="14"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="14"]:before {
  -webkit-transform: rotate(0.14turn);
      -ms-transform: rotate(0.14turn);
          transform: rotate(0.14turn);
}

.progress-pie-unicorn[data-value="15"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="15"]:before {
  -webkit-transform: rotate(0.15turn);
      -ms-transform: rotate(0.15turn);
          transform: rotate(0.15turn);
}

.progress-pie-unicorn[data-value="16"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="16"]:before {
  -webkit-transform: rotate(0.16turn);
      -ms-transform: rotate(0.16turn);
          transform: rotate(0.16turn);
}

.progress-pie-unicorn[data-value="17"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="17"]:before {
  -webkit-transform: rotate(0.17turn);
      -ms-transform: rotate(0.17turn);
          transform: rotate(0.17turn);
}

.progress-pie-unicorn[data-value="18"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="18"]:before {
  -webkit-transform: rotate(0.18turn);
      -ms-transform: rotate(0.18turn);
          transform: rotate(0.18turn);
}

.progress-pie-unicorn[data-value="19"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="19"]:before {
  -webkit-transform: rotate(0.19turn);
      -ms-transform: rotate(0.19turn);
          transform: rotate(0.19turn);
}

.progress-pie-unicorn[data-value="20"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #78c5d6 0);
  background-image: linear-gradient(to right, transparent 50%, #78c5d6 0);
}
.progress-pie-unicorn[data-value="20"]:before {
  -webkit-transform: rotate(0.2turn);
      -ms-transform: rotate(0.2turn);
          transform: rotate(0.2turn);
}

.progress-pie-unicorn[data-value="21"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="21"]:before {
  -webkit-transform: rotate(0.21turn);
      -ms-transform: rotate(0.21turn);
          transform: rotate(0.21turn);
}

.progress-pie-unicorn[data-value="22"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="22"]:before {
  -webkit-transform: rotate(0.22turn);
      -ms-transform: rotate(0.22turn);
          transform: rotate(0.22turn);
}

.progress-pie-unicorn[data-value="23"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="23"]:before {
  -webkit-transform: rotate(0.23turn);
      -ms-transform: rotate(0.23turn);
          transform: rotate(0.23turn);
}

.progress-pie-unicorn[data-value="24"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="24"]:before {
  -webkit-transform: rotate(0.24turn);
      -ms-transform: rotate(0.24turn);
          transform: rotate(0.24turn);
}

.progress-pie-unicorn[data-value="25"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="25"]:before {
  -webkit-transform: rotate(0.25turn);
      -ms-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
}

.progress-pie-unicorn[data-value="26"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="26"]:before {
  -webkit-transform: rotate(0.26turn);
      -ms-transform: rotate(0.26turn);
          transform: rotate(0.26turn);
}

.progress-pie-unicorn[data-value="27"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="27"]:before {
  -webkit-transform: rotate(0.27turn);
      -ms-transform: rotate(0.27turn);
          transform: rotate(0.27turn);
}

.progress-pie-unicorn[data-value="28"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="28"]:before {
  -webkit-transform: rotate(0.28turn);
      -ms-transform: rotate(0.28turn);
          transform: rotate(0.28turn);
}

.progress-pie-unicorn[data-value="29"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="29"]:before {
  -webkit-transform: rotate(0.29turn);
      -ms-transform: rotate(0.29turn);
          transform: rotate(0.29turn);
}

.progress-pie-unicorn[data-value="30"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="30"]:before {
  -webkit-transform: rotate(0.3turn);
      -ms-transform: rotate(0.3turn);
          transform: rotate(0.3turn);
}

.progress-pie-unicorn[data-value="31"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="31"]:before {
  -webkit-transform: rotate(0.31turn);
      -ms-transform: rotate(0.31turn);
          transform: rotate(0.31turn);
}

.progress-pie-unicorn[data-value="32"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="32"]:before {
  -webkit-transform: rotate(0.32turn);
      -ms-transform: rotate(0.32turn);
          transform: rotate(0.32turn);
}

.progress-pie-unicorn[data-value="33"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="33"]:before {
  -webkit-transform: rotate(0.33turn);
      -ms-transform: rotate(0.33turn);
          transform: rotate(0.33turn);
}

.progress-pie-unicorn[data-value="34"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="34"]:before {
  -webkit-transform: rotate(0.34turn);
      -ms-transform: rotate(0.34turn);
          transform: rotate(0.34turn);
}

.progress-pie-unicorn[data-value="35"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="35"]:before {
  -webkit-transform: rotate(0.35turn);
      -ms-transform: rotate(0.35turn);
          transform: rotate(0.35turn);
}

.progress-pie-unicorn[data-value="36"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="36"]:before {
  -webkit-transform: rotate(0.36turn);
      -ms-transform: rotate(0.36turn);
          transform: rotate(0.36turn);
}

.progress-pie-unicorn[data-value="37"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="37"]:before {
  -webkit-transform: rotate(0.37turn);
      -ms-transform: rotate(0.37turn);
          transform: rotate(0.37turn);
}

.progress-pie-unicorn[data-value="38"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="38"]:before {
  -webkit-transform: rotate(0.38turn);
      -ms-transform: rotate(0.38turn);
          transform: rotate(0.38turn);
}

.progress-pie-unicorn[data-value="39"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="39"]:before {
  -webkit-transform: rotate(0.39turn);
      -ms-transform: rotate(0.39turn);
          transform: rotate(0.39turn);
}

.progress-pie-unicorn[data-value="40"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #459ba8 0);
  background-image: linear-gradient(to right, transparent 50%, #459ba8 0);
}
.progress-pie-unicorn[data-value="40"]:before {
  -webkit-transform: rotate(0.4turn);
      -ms-transform: rotate(0.4turn);
          transform: rotate(0.4turn);
}

.progress-pie-unicorn[data-value="41"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0);
  background-image: linear-gradient(to right, transparent 50%, #79c267 0);
}
.progress-pie-unicorn[data-value="41"]:before {
  -webkit-transform: rotate(0.41turn);
      -ms-transform: rotate(0.41turn);
          transform: rotate(0.41turn);
}

.progress-pie-unicorn[data-value="42"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0);
  background-image: linear-gradient(to right, transparent 50%, #79c267 0);
}
.progress-pie-unicorn[data-value="42"]:before {
  -webkit-transform: rotate(0.42turn);
      -ms-transform: rotate(0.42turn);
          transform: rotate(0.42turn);
}

.progress-pie-unicorn[data-value="43"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0);
  background-image: linear-gradient(to right, transparent 50%, #79c267 0);
}
.progress-pie-unicorn[data-value="43"]:before {
  -webkit-transform: rotate(0.43turn);
      -ms-transform: rotate(0.43turn);
          transform: rotate(0.43turn);
}

.progress-pie-unicorn[data-value="44"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0);
  background-image: linear-gradient(to right, transparent 50%, #79c267 0);
}
.progress-pie-unicorn[data-value="44"]:before {
  -webkit-transform: rotate(0.44turn);
      -ms-transform: rotate(0.44turn);
          transform: rotate(0.44turn);
}

.progress-pie-unicorn[data-value="45"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0);
  background-image: linear-gradient(to right, transparent 50%, #79c267 0);
}
.progress-pie-unicorn[data-value="45"]:before {
  -webkit-transform: rotate(0.45turn);
      -ms-transform: rotate(0.45turn);
          transform: rotate(0.45turn);
}

.progress-pie-unicorn[data-value="46"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0);
  background-image: linear-gradient(to right, transparent 50%, #79c267 0);
}
.progress-pie-unicorn[data-value="46"]:before {
  -webkit-transform: rotate(0.46turn);
      -ms-transform: rotate(0.46turn);
          transform: rotate(0.46turn);
}

.progress-pie-unicorn[data-value="47"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0);
  background-image: linear-gradient(to right, transparent 50%, #79c267 0);
}
.progress-pie-unicorn[data-value="47"]:before {
  -webkit-transform: rotate(0.47turn);
      -ms-transform: rotate(0.47turn);
          transform: rotate(0.47turn);
}

.progress-pie-unicorn[data-value="48"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0);
  background-image: linear-gradient(to right, transparent 50%, #79c267 0);
}
.progress-pie-unicorn[data-value="48"]:before {
  -webkit-transform: rotate(0.48turn);
      -ms-transform: rotate(0.48turn);
          transform: rotate(0.48turn);
}

.progress-pie-unicorn[data-value="49"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0);
  background-image: linear-gradient(to right, transparent 50%, #79c267 0);
}
.progress-pie-unicorn[data-value="49"]:before {
  -webkit-transform: rotate(0.49turn);
      -ms-transform: rotate(0.49turn);
          transform: rotate(0.49turn);
}

.progress-pie-unicorn[data-value="50"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #79c267 0);
  background-image: linear-gradient(to right, transparent 50%, #79c267 0);
}
.progress-pie-unicorn[data-value="50"]:before {
  -webkit-transform: rotate(0.5turn);
      -ms-transform: rotate(0.5turn);
          transform: rotate(0.5turn);
}

.progress-pie-unicorn[data-value="51"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0);
  background-image: linear-gradient(to right, transparent 50%, #c5d647 0);
}
.progress-pie-unicorn[data-value="51"]:before {
  background-color: #c5d647;
  -webkit-transform: rotate(0.01turn);
      -ms-transform: rotate(0.01turn);
          transform: rotate(0.01turn);
}

.progress-pie-unicorn[data-value="52"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0);
  background-image: linear-gradient(to right, transparent 50%, #c5d647 0);
}
.progress-pie-unicorn[data-value="52"]:before {
  background-color: #c5d647;
  -webkit-transform: rotate(0.02turn);
      -ms-transform: rotate(0.02turn);
          transform: rotate(0.02turn);
}

.progress-pie-unicorn[data-value="53"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0);
  background-image: linear-gradient(to right, transparent 50%, #c5d647 0);
}
.progress-pie-unicorn[data-value="53"]:before {
  background-color: #c5d647;
  -webkit-transform: rotate(0.03turn);
      -ms-transform: rotate(0.03turn);
          transform: rotate(0.03turn);
}

.progress-pie-unicorn[data-value="54"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0);
  background-image: linear-gradient(to right, transparent 50%, #c5d647 0);
}
.progress-pie-unicorn[data-value="54"]:before {
  background-color: #c5d647;
  -webkit-transform: rotate(0.04turn);
      -ms-transform: rotate(0.04turn);
          transform: rotate(0.04turn);
}

.progress-pie-unicorn[data-value="55"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0);
  background-image: linear-gradient(to right, transparent 50%, #c5d647 0);
}
.progress-pie-unicorn[data-value="55"]:before {
  background-color: #c5d647;
  -webkit-transform: rotate(0.05turn);
      -ms-transform: rotate(0.05turn);
          transform: rotate(0.05turn);
}

.progress-pie-unicorn[data-value="56"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0);
  background-image: linear-gradient(to right, transparent 50%, #c5d647 0);
}
.progress-pie-unicorn[data-value="56"]:before {
  background-color: #c5d647;
  -webkit-transform: rotate(0.06turn);
      -ms-transform: rotate(0.06turn);
          transform: rotate(0.06turn);
}

.progress-pie-unicorn[data-value="57"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0);
  background-image: linear-gradient(to right, transparent 50%, #c5d647 0);
}
.progress-pie-unicorn[data-value="57"]:before {
  background-color: #c5d647;
  -webkit-transform: rotate(0.07turn);
      -ms-transform: rotate(0.07turn);
          transform: rotate(0.07turn);
}

.progress-pie-unicorn[data-value="58"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0);
  background-image: linear-gradient(to right, transparent 50%, #c5d647 0);
}
.progress-pie-unicorn[data-value="58"]:before {
  background-color: #c5d647;
  -webkit-transform: rotate(0.08turn);
      -ms-transform: rotate(0.08turn);
          transform: rotate(0.08turn);
}

.progress-pie-unicorn[data-value="59"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0);
  background-image: linear-gradient(to right, transparent 50%, #c5d647 0);
}
.progress-pie-unicorn[data-value="59"]:before {
  background-color: #c5d647;
  -webkit-transform: rotate(0.09turn);
      -ms-transform: rotate(0.09turn);
          transform: rotate(0.09turn);
}

.progress-pie-unicorn[data-value="60"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #c5d647 0);
  background-image: linear-gradient(to right, transparent 50%, #c5d647 0);
}
.progress-pie-unicorn[data-value="60"]:before {
  background-color: #c5d647;
  -webkit-transform: rotate(0.1turn);
      -ms-transform: rotate(0.1turn);
          transform: rotate(0.1turn);
}

.progress-pie-unicorn[data-value="61"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0);
  background-image: linear-gradient(to right, transparent 50%, #f5d63d 0);
}
.progress-pie-unicorn[data-value="61"]:before {
  background-color: #f5d63d;
  -webkit-transform: rotate(0.11turn);
      -ms-transform: rotate(0.11turn);
          transform: rotate(0.11turn);
}

.progress-pie-unicorn[data-value="62"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0);
  background-image: linear-gradient(to right, transparent 50%, #f5d63d 0);
}
.progress-pie-unicorn[data-value="62"]:before {
  background-color: #f5d63d;
  -webkit-transform: rotate(0.12turn);
      -ms-transform: rotate(0.12turn);
          transform: rotate(0.12turn);
}

.progress-pie-unicorn[data-value="63"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0);
  background-image: linear-gradient(to right, transparent 50%, #f5d63d 0);
}
.progress-pie-unicorn[data-value="63"]:before {
  background-color: #f5d63d;
  -webkit-transform: rotate(0.13turn);
      -ms-transform: rotate(0.13turn);
          transform: rotate(0.13turn);
}

.progress-pie-unicorn[data-value="64"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0);
  background-image: linear-gradient(to right, transparent 50%, #f5d63d 0);
}
.progress-pie-unicorn[data-value="64"]:before {
  background-color: #f5d63d;
  -webkit-transform: rotate(0.14turn);
      -ms-transform: rotate(0.14turn);
          transform: rotate(0.14turn);
}

.progress-pie-unicorn[data-value="65"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0);
  background-image: linear-gradient(to right, transparent 50%, #f5d63d 0);
}
.progress-pie-unicorn[data-value="65"]:before {
  background-color: #f5d63d;
  -webkit-transform: rotate(0.15turn);
      -ms-transform: rotate(0.15turn);
          transform: rotate(0.15turn);
}

.progress-pie-unicorn[data-value="66"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0);
  background-image: linear-gradient(to right, transparent 50%, #f5d63d 0);
}
.progress-pie-unicorn[data-value="66"]:before {
  background-color: #f5d63d;
  -webkit-transform: rotate(0.16turn);
      -ms-transform: rotate(0.16turn);
          transform: rotate(0.16turn);
}

.progress-pie-unicorn[data-value="67"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0);
  background-image: linear-gradient(to right, transparent 50%, #f5d63d 0);
}
.progress-pie-unicorn[data-value="67"]:before {
  background-color: #f5d63d;
  -webkit-transform: rotate(0.17turn);
      -ms-transform: rotate(0.17turn);
          transform: rotate(0.17turn);
}

.progress-pie-unicorn[data-value="68"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0);
  background-image: linear-gradient(to right, transparent 50%, #f5d63d 0);
}
.progress-pie-unicorn[data-value="68"]:before {
  background-color: #f5d63d;
  -webkit-transform: rotate(0.18turn);
      -ms-transform: rotate(0.18turn);
          transform: rotate(0.18turn);
}

.progress-pie-unicorn[data-value="69"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0);
  background-image: linear-gradient(to right, transparent 50%, #f5d63d 0);
}
.progress-pie-unicorn[data-value="69"]:before {
  background-color: #f5d63d;
  -webkit-transform: rotate(0.19turn);
      -ms-transform: rotate(0.19turn);
          transform: rotate(0.19turn);
}

.progress-pie-unicorn[data-value="70"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f5d63d 0);
  background-image: linear-gradient(to right, transparent 50%, #f5d63d 0);
}
.progress-pie-unicorn[data-value="70"]:before {
  background-color: #f5d63d;
  -webkit-transform: rotate(0.2turn);
      -ms-transform: rotate(0.2turn);
          transform: rotate(0.2turn);
}

.progress-pie-unicorn[data-value="71"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0);
  background-image: linear-gradient(to right, transparent 50%, #f28c33 0);
}
.progress-pie-unicorn[data-value="71"]:before {
  background-color: #f28c33;
  -webkit-transform: rotate(0.21turn);
      -ms-transform: rotate(0.21turn);
          transform: rotate(0.21turn);
}

.progress-pie-unicorn[data-value="72"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0);
  background-image: linear-gradient(to right, transparent 50%, #f28c33 0);
}
.progress-pie-unicorn[data-value="72"]:before {
  background-color: #f28c33;
  -webkit-transform: rotate(0.22turn);
      -ms-transform: rotate(0.22turn);
          transform: rotate(0.22turn);
}

.progress-pie-unicorn[data-value="73"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0);
  background-image: linear-gradient(to right, transparent 50%, #f28c33 0);
}
.progress-pie-unicorn[data-value="73"]:before {
  background-color: #f28c33;
  -webkit-transform: rotate(0.23turn);
      -ms-transform: rotate(0.23turn);
          transform: rotate(0.23turn);
}

.progress-pie-unicorn[data-value="74"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0);
  background-image: linear-gradient(to right, transparent 50%, #f28c33 0);
}
.progress-pie-unicorn[data-value="74"]:before {
  background-color: #f28c33;
  -webkit-transform: rotate(0.24turn);
      -ms-transform: rotate(0.24turn);
          transform: rotate(0.24turn);
}

.progress-pie-unicorn[data-value="75"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0);
  background-image: linear-gradient(to right, transparent 50%, #f28c33 0);
}
.progress-pie-unicorn[data-value="75"]:before {
  background-color: #f28c33;
  -webkit-transform: rotate(0.25turn);
      -ms-transform: rotate(0.25turn);
          transform: rotate(0.25turn);
}

.progress-pie-unicorn[data-value="76"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0);
  background-image: linear-gradient(to right, transparent 50%, #f28c33 0);
}
.progress-pie-unicorn[data-value="76"]:before {
  background-color: #f28c33;
  -webkit-transform: rotate(0.26turn);
      -ms-transform: rotate(0.26turn);
          transform: rotate(0.26turn);
}

.progress-pie-unicorn[data-value="77"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0);
  background-image: linear-gradient(to right, transparent 50%, #f28c33 0);
}
.progress-pie-unicorn[data-value="77"]:before {
  background-color: #f28c33;
  -webkit-transform: rotate(0.27turn);
      -ms-transform: rotate(0.27turn);
          transform: rotate(0.27turn);
}

.progress-pie-unicorn[data-value="78"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0);
  background-image: linear-gradient(to right, transparent 50%, #f28c33 0);
}
.progress-pie-unicorn[data-value="78"]:before {
  background-color: #f28c33;
  -webkit-transform: rotate(0.28turn);
      -ms-transform: rotate(0.28turn);
          transform: rotate(0.28turn);
}

.progress-pie-unicorn[data-value="79"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0);
  background-image: linear-gradient(to right, transparent 50%, #f28c33 0);
}
.progress-pie-unicorn[data-value="79"]:before {
  background-color: #f28c33;
  -webkit-transform: rotate(0.29turn);
      -ms-transform: rotate(0.29turn);
          transform: rotate(0.29turn);
}

.progress-pie-unicorn[data-value="80"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #f28c33 0);
  background-image: linear-gradient(to right, transparent 50%, #f28c33 0);
}
.progress-pie-unicorn[data-value="80"]:before {
  background-color: #f28c33;
  -webkit-transform: rotate(0.3turn);
      -ms-transform: rotate(0.3turn);
          transform: rotate(0.3turn);
}

.progress-pie-unicorn[data-value="81"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0);
  background-image: linear-gradient(to right, transparent 50%, #e868a2 0);
}
.progress-pie-unicorn[data-value="81"]:before {
  background-color: #e868a2;
  -webkit-transform: rotate(0.31turn);
      -ms-transform: rotate(0.31turn);
          transform: rotate(0.31turn);
}

.progress-pie-unicorn[data-value="82"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0);
  background-image: linear-gradient(to right, transparent 50%, #e868a2 0);
}
.progress-pie-unicorn[data-value="82"]:before {
  background-color: #e868a2;
  -webkit-transform: rotate(0.32turn);
      -ms-transform: rotate(0.32turn);
          transform: rotate(0.32turn);
}

.progress-pie-unicorn[data-value="83"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0);
  background-image: linear-gradient(to right, transparent 50%, #e868a2 0);
}
.progress-pie-unicorn[data-value="83"]:before {
  background-color: #e868a2;
  -webkit-transform: rotate(0.33turn);
      -ms-transform: rotate(0.33turn);
          transform: rotate(0.33turn);
}

.progress-pie-unicorn[data-value="84"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0);
  background-image: linear-gradient(to right, transparent 50%, #e868a2 0);
}
.progress-pie-unicorn[data-value="84"]:before {
  background-color: #e868a2;
  -webkit-transform: rotate(0.34turn);
      -ms-transform: rotate(0.34turn);
          transform: rotate(0.34turn);
}

.progress-pie-unicorn[data-value="85"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0);
  background-image: linear-gradient(to right, transparent 50%, #e868a2 0);
}
.progress-pie-unicorn[data-value="85"]:before {
  background-color: #e868a2;
  -webkit-transform: rotate(0.35turn);
      -ms-transform: rotate(0.35turn);
          transform: rotate(0.35turn);
}

.progress-pie-unicorn[data-value="86"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0);
  background-image: linear-gradient(to right, transparent 50%, #e868a2 0);
}
.progress-pie-unicorn[data-value="86"]:before {
  background-color: #e868a2;
  -webkit-transform: rotate(0.36turn);
      -ms-transform: rotate(0.36turn);
          transform: rotate(0.36turn);
}

.progress-pie-unicorn[data-value="87"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0);
  background-image: linear-gradient(to right, transparent 50%, #e868a2 0);
}
.progress-pie-unicorn[data-value="87"]:before {
  background-color: #e868a2;
  -webkit-transform: rotate(0.37turn);
      -ms-transform: rotate(0.37turn);
          transform: rotate(0.37turn);
}

.progress-pie-unicorn[data-value="88"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0);
  background-image: linear-gradient(to right, transparent 50%, #e868a2 0);
}
.progress-pie-unicorn[data-value="88"]:before {
  background-color: #e868a2;
  -webkit-transform: rotate(0.38turn);
      -ms-transform: rotate(0.38turn);
          transform: rotate(0.38turn);
}

.progress-pie-unicorn[data-value="89"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0);
  background-image: linear-gradient(to right, transparent 50%, #e868a2 0);
}
.progress-pie-unicorn[data-value="89"]:before {
  background-color: #e868a2;
  -webkit-transform: rotate(0.39turn);
      -ms-transform: rotate(0.39turn);
          transform: rotate(0.39turn);
}

.progress-pie-unicorn[data-value="90"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #e868a2 0);
  background-image: linear-gradient(to right, transparent 50%, #e868a2 0);
}
.progress-pie-unicorn[data-value="90"]:before {
  background-color: #e868a2;
  -webkit-transform: rotate(0.4turn);
      -ms-transform: rotate(0.4turn);
          transform: rotate(0.4turn);
}

.progress-pie-unicorn[data-value="91"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0);
  background-image: linear-gradient(to right, transparent 50%, #bf62a6 0);
}
.progress-pie-unicorn[data-value="91"]:before {
  background-color: #bf62a6;
  -webkit-transform: rotate(0.41turn);
      -ms-transform: rotate(0.41turn);
          transform: rotate(0.41turn);
}

.progress-pie-unicorn[data-value="92"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0);
  background-image: linear-gradient(to right, transparent 50%, #bf62a6 0);
}
.progress-pie-unicorn[data-value="92"]:before {
  background-color: #bf62a6;
  -webkit-transform: rotate(0.42turn);
      -ms-transform: rotate(0.42turn);
          transform: rotate(0.42turn);
}

.progress-pie-unicorn[data-value="93"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0);
  background-image: linear-gradient(to right, transparent 50%, #bf62a6 0);
}
.progress-pie-unicorn[data-value="93"]:before {
  background-color: #bf62a6;
  -webkit-transform: rotate(0.43turn);
      -ms-transform: rotate(0.43turn);
          transform: rotate(0.43turn);
}

.progress-pie-unicorn[data-value="94"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0);
  background-image: linear-gradient(to right, transparent 50%, #bf62a6 0);
}
.progress-pie-unicorn[data-value="94"]:before {
  background-color: #bf62a6;
  -webkit-transform: rotate(0.44turn);
      -ms-transform: rotate(0.44turn);
          transform: rotate(0.44turn);
}

.progress-pie-unicorn[data-value="95"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0);
  background-image: linear-gradient(to right, transparent 50%, #bf62a6 0);
}
.progress-pie-unicorn[data-value="95"]:before {
  background-color: #bf62a6;
  -webkit-transform: rotate(0.45turn);
      -ms-transform: rotate(0.45turn);
          transform: rotate(0.45turn);
}

.progress-pie-unicorn[data-value="96"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0);
  background-image: linear-gradient(to right, transparent 50%, #bf62a6 0);
}
.progress-pie-unicorn[data-value="96"]:before {
  background-color: #bf62a6;
  -webkit-transform: rotate(0.46turn);
      -ms-transform: rotate(0.46turn);
          transform: rotate(0.46turn);
}

.progress-pie-unicorn[data-value="97"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0);
  background-image: linear-gradient(to right, transparent 50%, #bf62a6 0);
}
.progress-pie-unicorn[data-value="97"]:before {
  background-color: #bf62a6;
  -webkit-transform: rotate(0.47turn);
      -ms-transform: rotate(0.47turn);
          transform: rotate(0.47turn);
}

.progress-pie-unicorn[data-value="98"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0);
  background-image: linear-gradient(to right, transparent 50%, #bf62a6 0);
}
.progress-pie-unicorn[data-value="98"]:before {
  background-color: #bf62a6;
  -webkit-transform: rotate(0.48turn);
      -ms-transform: rotate(0.48turn);
          transform: rotate(0.48turn);
}

.progress-pie-unicorn[data-value="99"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0);
  background-image: linear-gradient(to right, transparent 50%, #bf62a6 0);
}
.progress-pie-unicorn[data-value="99"]:before {
  background-color: #bf62a6;
  -webkit-transform: rotate(0.49turn);
      -ms-transform: rotate(0.49turn);
          transform: rotate(0.49turn);
}

.progress-pie-unicorn[data-value="100"] {
  background-image: -webkit-linear-gradient(left, transparent 50%, #bf62a6 0);
  background-image: linear-gradient(to right, transparent 50%, #bf62a6 0);
}
.progress-pie-unicorn[data-value="100"]:before {
  background-color: #bf62a6;
  -webkit-transform: rotate(0.5turn);
      -ms-transform: rotate(0.5turn);
          transform: rotate(0.5turn);
}

.hello {
box-shadow: 0 1px 1px rgba(0,0,0,0.4);
}