随着HTML5的普及，GIF图片在网站上的使用也渐渐的减少，采用CSS实现动画也如如雨后春笋般涌现。接下来就介绍下我为上家公司编写的CSS3圆形logo进度条动画。

它的 HTML 结构也很简单，如下所示

<div id="load_layout">
    <div class="wrap">
        <div class="progress-radial progress-0"><b></b></div>
        <p class="app-name">樱桃音乐</p>
        <p class="slogan-text">新一代音乐APP，为移动端而生</p>
    </div>
</div>

外层元素 .progress-radial 负责显示白色的底部圆形，通过:after绘画起始圆形点，通过:before来绘画运动圆形点。

.progress-radial {
 display: inline-block;
 position: relative;
 width: 180px;
 height: 180px;
 border-radius: 50%;
 border: 2px solid #de1e60;
 background-color: #fff;
 box-shadow: 0 2px 15px rgba(0,0,0,0.3);
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out
}
.progress-radial:after,.progress-radial:before {
 content: '';
 width: 60px;
 height: 60px;
 top: 50%;
 left: 50%;
 border-radius: 50%;
 margin-left: -30px;
 margin-top: -30px;
 background: #ea2c70;
 position: absolute;
 z-index: 999
}
.progress-radial b:after {
 color: #de1e60;
 position: absolute;
 font-weight: 900;
 left: 50%;
 top: 50%;
 width: 60px;
 height: 60px;
 background-color: #fff;
 border-radius: 50%;
 margin-left: -30px;
 margin-top: -30px;
 text-align: center;
 line-height: 60px;
 font-size: 20px
}
.progress-radial:after {
 z-index: 998;
 -webkit-transform: rotate(45deg) translate(0,-60px);
 -moz-transform: rotate(45deg) translate(0,-60px);
 -ms-transform: rotate(45deg) translate(0,-60px);
 -o-transform: rotate(45deg) translate(0,-60px);
 transform: rotate(45deg) translate(0,-60px)
}

通过采用linear-gradient来绘画两不同个扇型渲染区域，来表示进度，并且通过:before来进行旋转位移来表示进度加载完成的位置，javascript通过改变外层元素 .progress-radial的样式表.progress-百分比来控制绘画，通过元素b的:after来绘画中间白色圆点的表示并用CSS的content来填充进度百分比

.progress-0 {
    background-image: linear-gradient(90deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(90deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(90deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(90deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-0:before {
    -webkit-transform: rotate(45deg) translate(0,-60px);
    -moz-transform: rotate(45deg) translate(0,-60px);
    -ms-transform: rotate(45deg) translate(0,-60px);
    -o-transform: rotate(45deg) translate(0,-60px);
    transform: rotate(45deg) translate(0,-60px)
}

.progress-0 b:after {
    content: "0%"
}

.progress-1 {
    background-image: linear-gradient(132.3deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-42.3deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-1:before {
    -webkit-transform: rotate(42.3deg) translate(0,-60px);
    -moz-transform: rotate(42.3deg) translate(0,-60px);
    -ms-transform: rotate(42.3deg) translate(0,-60px);
    -o-transform: rotate(42.3deg) translate(0,-60px);
    transform: rotate(42.3deg) translate(0,-60px)
}

.progress-1 b:after {
    content: "1%"
}

.progress-2 {
    background-image: linear-gradient(129.6deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-39.6deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-2:before {
    -webkit-transform: rotate(39.6deg) translate(0,-60px);
    -moz-transform: rotate(39.6deg) translate(0,-60px);
    -ms-transform: rotate(39.6deg) translate(0,-60px);
    -o-transform: rotate(39.6deg) translate(0,-60px);
    transform: rotate(39.6deg) translate(0,-60px)
}

.progress-2 b:after {
    content: "2%"
}

.progress-3 {
    background-image: linear-gradient(126.9deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-36.9deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-3:before {
    -webkit-transform: rotate(36.9deg) translate(0,-60px);
    -moz-transform: rotate(36.9deg) translate(0,-60px);
    -ms-transform: rotate(36.9deg) translate(0,-60px);
    -o-transform: rotate(36.9deg) translate(0,-60px);
    transform: rotate(36.9deg) translate(0,-60px)
}

.progress-3 b:after {
    content: "3%"
}

.progress-4 {
    background-image: linear-gradient(124.2deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-34.2deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-4:before {
    -webkit-transform: rotate(34.2deg) translate(0,-60px);
    -moz-transform: rotate(34.2deg) translate(0,-60px);
    -ms-transform: rotate(34.2deg) translate(0,-60px);
    -o-transform: rotate(34.2deg) translate(0,-60px);
    transform: rotate(34.2deg) translate(0,-60px)
}

.progress-4 b:after {
    content: "4%"
}

.progress-5 {
    background-image: linear-gradient(121.5deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-31.5deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-5:before {
    -webkit-transform: rotate(31.5deg) translate(0,-60px);
    -moz-transform: rotate(31.5deg) translate(0,-60px);
    -ms-transform: rotate(31.5deg) translate(0,-60px);
    -o-transform: rotate(31.5deg) translate(0,-60px);
    transform: rotate(31.5deg) translate(0,-60px)
}

.progress-5 b:after {
    content: "5%"
}

.progress-6 {
    background-image: linear-gradient(118.8deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-28.8deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-6:before {
    -webkit-transform: rotate(28.8deg) translate(0,-60px);
    -moz-transform: rotate(28.8deg) translate(0,-60px);
    -ms-transform: rotate(28.8deg) translate(0,-60px);
    -o-transform: rotate(28.8deg) translate(0,-60px);
    transform: rotate(28.8deg) translate(0,-60px)
}

.progress-6 b:after {
    content: "6%"
}

.progress-7 {
    background-image: linear-gradient(116.1deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-26.1deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-7:before {
    -webkit-transform: rotate(26.1deg) translate(0,-60px);
    -moz-transform: rotate(26.1deg) translate(0,-60px);
    -ms-transform: rotate(26.1deg) translate(0,-60px);
    -o-transform: rotate(26.1deg) translate(0,-60px);
    transform: rotate(26.1deg) translate(0,-60px)
}

.progress-7 b:after {
    content: "7%"
}
.progress-8 {
    background-image: linear-gradient(113.4deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-23.4deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-8:before {
    -webkit-transform: rotate(23.4deg) translate(0,-60px);
    -moz-transform: rotate(23.4deg) translate(0,-60px);
    -ms-transform: rotate(23.4deg) translate(0,-60px);
    -o-transform: rotate(23.4deg) translate(0,-60px);
    transform: rotate(23.4deg) translate(0,-60px)
}

.progress-8 b:after {
    content: "8%"
}

.progress-9 {
    background-image: linear-gradient(110.7deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-20.7deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-9:before {
    -webkit-transform: rotate(20.7deg) translate(0,-60px);
    -moz-transform: rotate(20.7deg) translate(0,-60px);
    -ms-transform: rotate(20.7deg) translate(0,-60px);
    -o-transform: rotate(20.7deg) translate(0,-60px);
    transform: rotate(20.7deg) translate(0,-60px)
}

.progress-9 b:after {
    content: "9%"
}

.progress-10 {
    background-image: linear-gradient(108deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-18deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-10:before {
    -webkit-transform: rotate(18deg) translate(0,-60px);
    -moz-transform: rotate(18deg) translate(0,-60px);
    -ms-transform: rotate(18deg) translate(0,-60px);
    -o-transform: rotate(18deg) translate(0,-60px);
    transform: rotate(18deg) translate(0,-60px)
}

.progress-10 b:after {
    content: "10%"
}

.progress-11 {
    background-image: linear-gradient(105.3deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-15.3deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-11:before {
    -webkit-transform: rotate(15.3deg) translate(0,-60px);
    -moz-transform: rotate(15.3deg) translate(0,-60px);
    -ms-transform: rotate(15.3deg) translate(0,-60px);
    -o-transform: rotate(15.3deg) translate(0,-60px);
    transform: rotate(15.3deg) translate(0,-60px)
}

.progress-11 b:after {
    content: "11%"
}

.progress-12 {
    background-image: linear-gradient(102.6deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-12.6deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-12:before {
    -webkit-transform: rotate(12.6deg) translate(0,-60px);
    -moz-transform: rotate(12.6deg) translate(0,-60px);
    -ms-transform: rotate(12.6deg) translate(0,-60px);
    -o-transform: rotate(12.6deg) translate(0,-60px);
    transform: rotate(12.6deg) translate(0,-60px)
}

.progress-12 b:after {
    content: "12%"
}

.progress-13 {
    background-image: linear-gradient(99.9deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-9.9deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-13:before {
    transform: rotate(9.9deg) translate(0,-60px);
    -webkit-transform: rotate(9.9deg) translate(0,-60px);
    -moz-transform: rotate(9.9deg) translate(0,-60px);
    -ms-transform: rotate(9.9deg) translate(0,-60px);
    -o-transform: rotate(9.9deg) translate(0,-60px)
}

.progress-13 b:after {
    content: "13%"
}

.progress-14 {
    background-image: linear-gradient(97.2deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-7.2deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-14:before {
    transform: rotate(7.2deg) translate(0,-60px);
    -webkit-transform: rotate(7.2deg) translate(0,-60px);
    -moz-transform: rotate(7.2deg) translate(0,-60px);
    -ms-transform: rotate(7.2deg) translate(0,-60px);
    -o-transform: rotate(7.2deg) translate(0,-60px)
}

.progress-14 b:after {
    content: "14%"
}

.progress-15 {
    background-image: linear-gradient(94.4deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-4.4deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-15:before {
    transform: rotate(4.4deg) translate(0,-60px);
    -webkit-transform: rotate(4.4deg) translate(0,-60px);
    -moz-transform: rotate(4.4deg) translate(0,-60px);
    -ms-transform: rotate(4.4deg) translate(0,-60px);
    -o-transform: rotate(4.4deg) translate(0,-60px)
}

.progress-15 b:after {
    content: "15%"
}
.progress-16 {
    background-image: linear-gradient(91.7deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-1.7deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-16:before {
    transform: rotate(1.7deg) translate(0,-60px);
    -webkit-transform: rotate(1.7deg) translate(0,-60px);
    -moz-transform: rotate(1.7deg) translate(0,-60px);
    -ms-transform: rotate(1.7deg) translate(0,-60px);
    -o-transform: rotate(1.7deg) translate(0,-60px)
}

.progress-16 b:after {
    content: "16%"
}

.progress-17 {
    background-image: linear-gradient(89deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(1deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-17:before {
    transform: rotate(-1deg) translate(0,-60px);
    -webkit-transform: rotate(-1deg) translate(0,-60px);
    -moz-transform: rotate(-1deg) translate(0,-60px);
    -ms-transform: rotate(-1deg) translate(0,-60px);
    -o-transform: rotate(-1deg) translate(0,-60px)
}

.progress-17 b:after {
    content: "17%"
}

.progress-18 {
    background-image: linear-gradient(86.3deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(3.7deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-18:before {
    transform: rotate(-3.7deg) translate(0,-60px);
    -webkit-transform: rotate(-3.7deg) translate(0,-60px);
    -moz-transform: rotate(-3.7deg) translate(0,-60px);
    -ms-transform: rotate(-3.7deg) translate(0,-60px);
    -o-transform: rotate(-3.7deg) translate(0,-60px)
}

.progress-18 b:after {
    content: "18%"
}

.progress-19 {
    background-image: linear-gradient(83.6deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(6.4deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-19:before {
    transform: rotate(-6.4deg) translate(0,-60px);
    -webkit-transform: rotate(-6.4deg) translate(0,-60px);
    -moz-transform: rotate(-6.4deg) translate(0,-60px);
    -ms-transform: rotate(-6.4deg) translate(0,-60px);
    -o-transform: rotate(-6.4deg) translate(0,-60px)
}

.progress-19 b:after {
    content: "19%"
}

.progress-20 {
    background-image: linear-gradient(80.9deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(9.1deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-20:before {
    transform: rotate(-9.1deg) translate(0,-60px);
    -webkit-transform: rotate(-9.1deg) translate(0,-60px);
    -moz-transform: rotate(-9.1deg) translate(0,-60px);
    -ms-transform: rotate(-9.1deg) translate(0,-60px);
    -o-transform: rotate(-9.1deg) translate(0,-60px)
}

.progress-20 b:after {
    content: "20%"
}

.progress-21 {
    background-image: linear-gradient(78.2deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(11.8deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-21:before {
    transform: rotate(-11.8deg) translate(0,-60px);
    -webkit-transform: rotate(-11.8deg) translate(0,-60px);
    -moz-transform: rotate(-11.8deg) translate(0,-60px);
    -ms-transform: rotate(-11.8deg) translate(0,-60px);
    -o-transform: rotate(-11.8deg) translate(0,-60px)
}

.progress-21 b:after {
    content: "21%"
}

.progress-22 {
    background-image: linear-gradient(75.5deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(14.5deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-22:before {
    transform: rotate(-14.5deg) translate(0,-60px);
    -webkit-transform: rotate(-14.5deg) translate(0,-60px);
    -moz-transform: rotate(-14.5deg) translate(0,-60px);
    -ms-transform: rotate(-14.5deg) translate(0,-60px);
    -o-transform: rotate(-14.5deg) translate(0,-60px)
}

.progress-22 b:after {
    content: "22%"
}

.progress-23 {
    background-image: linear-gradient(72.8deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(17.2deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-23:before {
    transform: rotate(-17.2deg) translate(0,-60px);
    -webkit-transform: rotate(-17.2deg) translate(0,-60px);
    -moz-transform: rotate(-17.2deg) translate(0,-60px);
    -ms-transform: rotate(-17.2deg) translate(0,-60px);
    -o-transform: rotate(-17.2deg) translate(0,-60px)
}
.progress-23 b:after {
    content: "23%"
}

.progress-24 {
    background-image: linear-gradient(70.1deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(19.9deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-24:before {
    transform: rotate(-19.9deg) translate(0,-60px);
    -webkit-transform: rotate(-19.9deg) translate(0,-60px);
    -moz-transform: rotate(-19.9deg) translate(0,-60px);
    -ms-transform: rotate(-19.9deg) translate(0,-60px);
    -o-transform: rotate(-19.9deg) translate(0,-60px)
}

.progress-24 b:after {
    content: "24%"
}

.progress-25 {
    background-image: linear-gradient(67.4deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(22.6deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-25:before {
    transform: rotate(-22.6deg) translate(0,-60px);
    -webkit-transform: rotate(-22.6deg) translate(0,-60px);
    -moz-transform: rotate(-22.6deg) translate(0,-60px);
    -ms-transform: rotate(-22.6deg) translate(0,-60px);
    -o-transform: rotate(-22.6deg) translate(0,-60px)
}

.progress-25 b:after {
    content: "25%"
}

.progress-26 {
    background-image: linear-gradient(64.7deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(25.3deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-26:before {
    transform: rotate(-25.3deg) translate(0,-60px);
    -webkit-transform: rotate(-25.3deg) translate(0,-60px);
    -moz-transform: rotate(-25.3deg) translate(0,-60px);
    -ms-transform: rotate(-25.3deg) translate(0,-60px);
    -o-transform: rotate(-25.3deg) translate(0,-60px)
}

.progress-26 b:after {
    content: "26%"
}

.progress-27 {
    background-image: linear-gradient(62deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(28deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-27:before {
    transform: rotate(-28deg) translate(0,-60px);
    -webkit-transform: rotate(-28deg) translate(0,-60px);
    -moz-transform: rotate(-28deg) translate(0,-60px);
    -ms-transform: rotate(-28deg) translate(0,-60px);
    -o-transform: rotate(-28deg) translate(0,-60px)
}

.progress-27 b:after {
    content: "27%"
}

.progress-28 {
    background-image: linear-gradient(59.3deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(30.7deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-28:before {
    transform: rotate(-30.7deg) translate(0,-60px);
    -webkit-transform: rotate(-30.7deg) translate(0,-60px);
    -moz-transform: rotate(-30.7deg) translate(0,-60px);
    -ms-transform: rotate(-30.7deg) translate(0,-60px);
    -o-transform: rotate(-30.7deg) translate(0,-60px)
}

.progress-28 b:after {
    content: "28%"
}

.progress-29 {
    background-image: linear-gradient(56.6deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(33.4deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-29:before {
    transform: rotate(-33.4deg) translate(0,-60px);
    -webkit-transform: rotate(-33.4deg) translate(0,-60px);
    -moz-transform: rotate(-33.4deg) translate(0,-60px);
    -ms-transform: rotate(-33.4deg) translate(0,-60px);
    -o-transform: rotate(-33.4deg) translate(0,-60px)
}

.progress-29 b:after {
    content: "29%"
}

.progress-30 {
    background-image: linear-gradient(53.9deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(36.1deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-30:before {
    transform: rotate(-36.1deg) translate(0,-60px);
    -webkit-transform: rotate(-36.1deg) translate(0,-60px);
    -moz-transform: rotate(-36.1deg) translate(0,-60px);
    -ms-transform: rotate(-36.1deg) translate(0,-60px);
    -o-transform: rotate(-36.1deg) translate(0,-60px)
}

.progress-30 b:after {
    content: "30%"
}

.progress-31 {
    background-image: linear-gradient(51.2deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(38.8deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-31:before {
    transform: rotate(-38.8deg) translate(0,-60px);
    -webkit-transform: rotate(-38.8deg) translate(0,-60px);
    -moz-transform: rotate(-38.8deg) translate(0,-60px);
    -ms-transform: rotate(-38.8deg) translate(0,-60px);
    -o-transform: rotate(-38.8deg) translate(0,-60px)
}
.progress-31 b:after {
    content: "31%"
}

.progress-32 {
    background-image: linear-gradient(48.5deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(41.5deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-32:before {
    transform: rotate(-41.5deg) translate(0,-60px);
    -webkit-transform: rotate(-41.5deg) translate(0,-60px);
    -moz-transform: rotate(-41.5deg) translate(0,-60px);
    -ms-transform: rotate(-41.5deg) translate(0,-60px);
    -o-transform: rotate(-41.5deg) translate(0,-60px)
}

.progress-32 b:after {
    content: "32%"
}

.progress-33 {
    background-image: linear-gradient(45.8deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(44.2deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-33:before {
    transform: rotate(-44.2deg) translate(0,-60px);
    -webkit-transform: rotate(-44.2deg) translate(0,-60px);
    -moz-transform: rotate(-44.2deg) translate(0,-60px);
    -ms-transform: rotate(-44.2deg) translate(0,-60px);
    -o-transform: rotate(-44.2deg) translate(0,-60px)
}

.progress-33 b:after {
    content: "33%"
}

.progress-34 {
    background-image: linear-gradient(43.1deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(46.9deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-34:before {
    transform: rotate(-46.9deg) translate(0,-60px);
    -webkit-transform: rotate(-46.9deg) translate(0,-60px);
    -moz-transform: rotate(-46.9deg) translate(0,-60px);
    -ms-transform: rotate(-46.9deg) translate(0,-60px);
    -o-transform: rotate(-46.9deg) translate(0,-60px)
}

.progress-34 b:after {
    content: "34%"
}

.progress-35 {
    background-image: linear-gradient(40.4deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(49.6deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-35:before {
    transform: rotate(-49.6deg) translate(0,-60px);
    -webkit-transform: rotate(-49.6deg) translate(0,-60px);
    -moz-transform: rotate(-49.6deg) translate(0,-60px);
    -ms-transform: rotate(-49.6deg) translate(0,-60px);
    -o-transform: rotate(-49.6deg) translate(0,-60px)
}

.progress-35 b:after {
    content: "35%"
}

.progress-36 {
    background-image: linear-gradient(37.7deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(52.3deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-36:before {
    transform: rotate(-52.3deg) translate(0,-60px);
    -webkit-transform: rotate(-52.3deg) translate(0,-60px);
    -moz-transform: rotate(-52.3deg) translate(0,-60px);
    -ms-transform: rotate(-52.3deg) translate(0,-60px);
    -o-transform: rotate(-52.3deg) translate(0,-60px)
}

.progress-36 b:after {
    content: "36%"
}

.progress-37 {
    background-image: linear-gradient(35deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(55deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-37:before {
    transform: rotate(-55deg) translate(0,-60px);
    -webkit-transform: rotate(-55deg) translate(0,-60px);
    -moz-transform: rotate(-55deg) translate(0,-60px);
    -ms-transform: rotate(-55deg) translate(0,-60px);
    -o-transform: rotate(-55deg) translate(0,-60px)
}

.progress-37 b:after {
    content: "37%"
}

.progress-38 {
    background-image: linear-gradient(32.3deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(57.7deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-38:before {
    transform: rotate(-57.7deg) translate(0,-60px);
    -webkit-transform: rotate(-57.7deg) translate(0,-60px);
    -moz-transform: rotate(-57.7deg) translate(0,-60px);
    -ms-transform: rotate(-57.7deg) translate(0,-60px);
    -o-transform: rotate(-57.7deg) translate(0,-60px)
}

.progress-38 b:after {
    content: "38%"
}

.progress-39 {
    background-image: linear-gradient(29.6deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(60.4deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-39:before {
    transform: rotate(-60.4deg) translate(0,-60px);
    -webkit-transform: rotate(-60.4deg) translate(0,-60px);
    -moz-transform: rotate(-60.4deg) translate(0,-60px);
    -ms-transform: rotate(-60.4deg) translate(0,-60px);
    -o-transform: rotate(-60.4deg) translate(0,-60px)
}
.progress-39 b:after {
    content: "39%"
}

.progress-40 {
    background-image: linear-gradient(26.9deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(63.1deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-40:before {
    transform: rotate(-63.1deg) translate(0,-60px);
    -webkit-transform: rotate(-63.1deg) translate(0,-60px);
    -moz-transform: rotate(-63.1deg) translate(0,-60px);
    -ms-transform: rotate(-63.1deg) translate(0,-60px);
    -o-transform: rotate(-63.1deg) translate(0,-60px)
}

.progress-40 b:after {
    content: "40%"
}

.progress-41 {
    background-image: linear-gradient(24.2deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(65.8deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-41:before {
    transform: rotate(-65.8deg) translate(0,-60px);
    -webkit-transform: rotate(-65.8deg) translate(0,-60px);
    -moz-transform: rotate(-65.8deg) translate(0,-60px);
    -ms-transform: rotate(-65.8deg) translate(0,-60px);
    -o-transform: rotate(-65.8deg) translate(0,-60px)
}

.progress-41 b:after {
    content: "41%"
}

.progress-42 {
    background-image: linear-gradient(21.5deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(68.5deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-42:before {
    transform: rotate(-68.5deg) translate(0,-60px);
    -webkit-transform: rotate(-68.5deg) translate(0,-60px);
    -moz-transform: rotate(-68.5deg) translate(0,-60px);
    -ms-transform: rotate(-68.5deg) translate(0,-60px);
    -o-transform: rotate(-68.5deg) translate(0,-60px)
}

.progress-42 b:after {
    content: "42%"
}

.progress-43 {
    background-image: linear-gradient(18.8deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(71.2deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-43:before {
    transform: rotate(-71.2deg) translate(0,-60px);
    -webkit-transform: rotate(-71.2deg) translate(0,-60px);
    -moz-transform: rotate(-71.2deg) translate(0,-60px);
    -ms-transform: rotate(-71.2deg) translate(0,-60px);
    -o-transform: rotate(-71.2deg) translate(0,-60px)
}

.progress-43 b:after {
    content: "43%"
}

.progress-44 {
    background-image: linear-gradient(16.1deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(73.9deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-44:before {
    transform: rotate(-73.9deg) translate(0,-60px);
    -webkit-transform: rotate(-73.9deg) translate(0,-60px);
    -moz-transform: rotate(-73.9deg) translate(0,-60px);
    -ms-transform: rotate(-73.9deg) translate(0,-60px);
    -o-transform: rotate(-73.9deg) translate(0,-60px)
}

.progress-44 b:after {
    content: "44%"
}

.progress-45 {
    background-image: linear-gradient(13.4deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(76.6deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-45:before {
    transform: rotate(-76.6deg) translate(0,-60px);
    -webkit-transform: rotate(-76.6deg) translate(0,-60px);
    -moz-transform: rotate(-76.6deg) translate(0,-60px);
    -ms-transform: rotate(-76.6deg) translate(0,-60px);
    -o-transform: rotate(-76.6deg) translate(0,-60px)
}

.progress-45 b:after {
    content: "45%"
}

.progress-46 {
    background-image: linear-gradient(10.7deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(79.3deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-46:before {
    transform: rotate(-79.3deg) translate(0,-60px);
    -webkit-transform: rotate(-79.3deg) translate(0,-60px);
    -moz-transform: rotate(-79.3deg) translate(0,-60px);
    -ms-transform: rotate(-79.3deg) translate(0,-60px);
    -o-transform: rotate(-79.3deg) translate(0,-60px)
}

.progress-46 b:after {
    content: "46%"
}

.progress-47 {
    background-image: linear-gradient(8deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(82deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-47:before {
    transform: rotate(-82deg) translate(0,-60px);
    -webkit-transform: rotate(-82deg) translate(0,-60px);
    -moz-transform: rotate(-82deg) translate(0,-60px);
    -ms-transform: rotate(-82deg) translate(0,-60px);
    -o-transform: rotate(-82deg) translate(0,-60px)
}
.progress-47 b:after {
    content: "47%"
}

.progress-48 {
    background-image: linear-gradient(5.3deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(84.7deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-48:before {
    transform: rotate(-84.7deg) translate(0,-60px);
    -webkit-transform: rotate(-84.7deg) translate(0,-60px);
    -moz-transform: rotate(-84.7deg) translate(0,-60px);
    -ms-transform: rotate(-84.7deg) translate(0,-60px);
    -o-transform: rotate(-84.7deg) translate(0,-60px)
}

.progress-48 b:after {
    content: "48%"
}

.progress-49 {
    background-image: linear-gradient(2.6deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(87.4deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-49:before {
    transform: rotate(-87.4deg) translate(0,-60px);
    -webkit-transform: rotate(-87.4deg) translate(0,-60px);
    -moz-transform: rotate(-87.4deg) translate(0,-60px);
    -ms-transform: rotate(-87.4deg) translate(0,-60px);
    -o-transform: rotate(-87.4deg) translate(0,-60px)
}

.progress-49 b:after {
    content: "49%"
}

.progress-50 {
    background-image: linear-gradient(-0.1deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(90.1deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-50:before {
    transform: rotate(-90.1deg) translate(0,-60px);
    -webkit-transform: rotate(-90.1deg) translate(0,-60px);
    -moz-transform: rotate(-90.1deg) translate(0,-60px);
    -ms-transform: rotate(-90.1deg) translate(0,-60px);
    -o-transform: rotate(-90.1deg) translate(0,-60px)
}

.progress-50 b:after {
    content: "50%"
}

.progress-51 {
    background-image: linear-gradient(-2.8deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(92.8deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-51:before {
    transform: rotate(-92.8deg) translate(0,-60px);
    -webkit-transform: rotate(-92.8deg) translate(0,-60px);
    -moz-transform: rotate(-92.8deg) translate(0,-60px);
    -ms-transform: rotate(-92.8deg) translate(0,-60px);
    -o-transform: rotate(-92.8deg) translate(0,-60px)
}

.progress-51 b:after {
    content: "51%"
}

.progress-52 {
    background-image: linear-gradient(-5.5deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(95.5deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-52:before {
    transform: rotate(-95.5deg) translate(0,-60px);
    -webkit-transform: rotate(-95.5deg) translate(0,-60px);
    -moz-transform: rotate(-95.5deg) translate(0,-60px);
    -ms-transform: rotate(-95.5deg) translate(0,-60px);
    -o-transform: rotate(-95.5deg) translate(0,-60px)
}

.progress-52 b:after {
    content: "52%"
}

.progress-53 {
    background-image: linear-gradient(-8.3deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(98.3deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-53:before {
    transform: rotate(-98.3deg) translate(0,-60px);
    -webkit-transform: rotate(-98.3deg) translate(0,-60px);
    -moz-transform: rotate(-98.3deg) translate(0,-60px);
    -ms-transform: rotate(-98.3deg) translate(0,-60px);
    -o-transform: rotate(-98.3deg) translate(0,-60px)
}

.progress-53 b:after {
    content: "53%"
}

.progress-54 {
    background-image: linear-gradient(-11deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(101deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-54:before {
    transform: rotate(-101deg) translate(0,-60px);
    -webkit-transform: rotate(-101deg) translate(0,-60px);
    -moz-transform: rotate(-101deg) translate(0,-60px);
    -ms-transform: rotate(-101deg) translate(0,-60px);
    -o-transform: rotate(-101deg) translate(0,-60px)
}

.progress-54 b:after {
    content: "54%"
}

.progress-55 {
    background-image: linear-gradient(-13.7deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(103.7deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-55:before {
    transform: rotate(-103.7deg) translate(0,-60px);
    -webkit-transform: rotate(-103.7deg) translate(0,-60px);
    -moz-transform: rotate(-103.7deg) translate(0,-60px);
    -ms-transform: rotate(-103.7deg) translate(0,-60px);
    -o-transform: rotate(-103.7deg) translate(0,-60px)
}
.progress-55 b:after {
    content: "55%"
}

.progress-56 {
    background-image: linear-gradient(-16.4deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(106.4deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-56:before {
    transform: rotate(-106.4deg) translate(0,-60px);
    -webkit-transform: rotate(-106.4deg) translate(0,-60px);
    -moz-transform: rotate(-106.4deg) translate(0,-60px);
    -ms-transform: rotate(-106.4deg) translate(0,-60px);
    -o-transform: rotate(-106.4deg) translate(0,-60px)
}

.progress-56 b:after {
    content: "56%"
}

.progress-57 {
    background-image: linear-gradient(-19.1deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(109.1deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-57:before {
    transform: rotate(-109.1deg) translate(0,-60px);
    -webkit-transform: rotate(-109.1deg) translate(0,-60px);
    -moz-transform: rotate(-109.1deg) translate(0,-60px);
    -ms-transform: rotate(-109.1deg) translate(0,-60px);
    -o-transform: rotate(-109.1deg) translate(0,-60px)
}

.progress-57 b:after {
    content: "57%"
}

.progress-58 {
    background-image: linear-gradient(-21.8deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(111.8deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-58:before {
    transform: rotate(-111.8deg) translate(0,-60px);
    -webkit-transform: rotate(-111.8deg) translate(0,-60px);
    -moz-transform: rotate(-111.8deg) translate(0,-60px);
    -ms-transform: rotate(-111.8deg) translate(0,-60px);
    -o-transform: rotate(-111.8deg) translate(0,-60px)
}

.progress-58 b:after {
    content: "58%"
}

.progress-59 {
    background-image: linear-gradient(-24.5deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(114.5deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-59:before {
    transform: rotate(-114.5deg) translate(0,-60px);
    -webkit-transform: rotate(-114.5deg) translate(0,-60px);
    -moz-transform: rotate(-114.5deg) translate(0,-60px);
    -ms-transform: rotate(-114.5deg) translate(0,-60px);
    -o-transform: rotate(-114.5deg) translate(0,-60px)
}

.progress-59 b:after {
    content: "59%"
}

.progress-60 {
    background-image: linear-gradient(-27.2deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(117.2deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-60:before {
    transform: rotate(-117.2deg) translate(0,-60px);
    -webkit-transform: rotate(-117.2deg) translate(0,-60px);
    -moz-transform: rotate(-117.2deg) translate(0,-60px);
    -ms-transform: rotate(-117.2deg) translate(0,-60px);
    -o-transform: rotate(-117.2deg) translate(0,-60px)
}

.progress-60 b:after {
    content: "60%"
}

.progress-61 {
    background-image: linear-gradient(-29.9deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(119.9deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-61:before {
    transform: rotate(-119.9deg) translate(0,-60px);
    -webkit-transform: rotate(-119.9deg) translate(0,-60px);
    -moz-transform: rotate(-119.9deg) translate(0,-60px);
    -ms-transform: rotate(-119.9deg) translate(0,-60px);
    -o-transform: rotate(-119.9deg) translate(0,-60px)
}

.progress-61 b:after {
    content: "61%"
}

.progress-62 {
    background-image: linear-gradient(-32.6deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(122.6deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-62:before {
    transform: rotate(-122.6deg) translate(0,-60px);
    -webkit-transform: rotate(-122.6deg) translate(0,-60px);
    -moz-transform: rotate(-122.6deg) translate(0,-60px);
    -ms-transform: rotate(-122.6deg) translate(0,-60px);
    -o-transform: rotate(-122.6deg) translate(0,-60px)
}

.progress-62 b:after {
    content: "62%"
}

.progress-63 {
    background-image: linear-gradient(-35.3deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(125.3deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-63:before {
    transform: rotate(-125.3deg) translate(0,-60px);
    -webkit-transform: rotate(-125.3deg) translate(0,-60px);
    -moz-transform: rotate(-125.3deg) translate(0,-60px);
    -ms-transform: rotate(-125.3deg) translate(0,-60px);
    -o-transform: rotate(-125.3deg) translate(0,-60px)
}
.progress-63 b:after {
    content: "63%"
}

.progress-64 {
    background-image: linear-gradient(-38deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(128deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-64:before {
    transform: rotate(-128deg) translate(0,-60px);
    -webkit-transform: rotate(-128deg) translate(0,-60px);
    -moz-transform: rotate(-128deg) translate(0,-60px);
    -ms-transform: rotate(-128deg) translate(0,-60px);
    -o-transform: rotate(-128deg) translate(0,-60px)
}

.progress-64 b:after {
    content: "64%"
}

.progress-65 {
    background-image: linear-gradient(-40.7deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(130.7deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-65:before {
    transform: rotate(-130.7deg) translate(0,-60px);
    -webkit-transform: rotate(-130.7deg) translate(0,-60px);
    -moz-transform: rotate(-130.7deg) translate(0,-60px);
    -ms-transform: rotate(-130.7deg) translate(0,-60px);
    -o-transform: rotate(-130.7deg) translate(0,-60px)
}

.progress-65 b:after {
    content: "65%"
}

.progress-66 {
    background-image: linear-gradient(-43.4deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(133.4deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-66:before {
    transform: rotate(-133.4deg) translate(0,-60px);
    -webkit-transform: rotate(-133.4deg) translate(0,-60px);
    -moz-transform: rotate(-133.4deg) translate(0,-60px);
    -ms-transform: rotate(-133.4deg) translate(0,-60px);
    -o-transform: rotate(-133.4deg) translate(0,-60px)
}

.progress-66 b:after {
    content: "66%"
}

.progress-67 {
    background-image: linear-gradient(-46.1deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(136.1deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-67:before {
    transform: rotate(-136.1deg) translate(0,-60px);
    -webkit-transform: rotate(-136.1deg) translate(0,-60px);
    -moz-transform: rotate(-136.1deg) translate(0,-60px);
    -ms-transform: rotate(-136.1deg) translate(0,-60px);
    -o-transform: rotate(-136.1deg) translate(0,-60px)
}

.progress-67 b:after {
    content: "67%"
}

.progress-68 {
    background-image: linear-gradient(-48.8deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(138.8deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-68:before {
    transform: rotate(-138.8deg) translate(0,-60px);
    -webkit-transform: rotate(-138.8deg) translate(0,-60px);
    -moz-transform: rotate(-138.8deg) translate(0,-60px);
    -ms-transform: rotate(-138.8deg) translate(0,-60px);
    -o-transform: rotate(-138.8deg) translate(0,-60px)
}

.progress-68 b:after {
    content: "68%"
}

.progress-69 {
    background-image: linear-gradient(-51.5deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(141.5deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-69:before {
    transform: rotate(-141.5deg) translate(0,-60px);
    -webkit-transform: rotate(-141.5deg) translate(0,-60px);
    -moz-transform: rotate(-141.5deg) translate(0,-60px);
    -ms-transform: rotate(-141.5deg) translate(0,-60px);
    -o-transform: rotate(-141.5deg) translate(0,-60px)
}

.progress-69 b:after {
    content: "69%"
}

.progress-70 {
    background-image: linear-gradient(-54.2deg,#de1e60 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(144.2deg,#de1e60 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-70:before {
    transform: rotate(-144.2deg) translate(0,-60px);
    -webkit-transform: rotate(-144.2deg) translate(0,-60px);
    -moz-transform: rotate(-144.2deg) translate(0,-60px);
    -ms-transform: rotate(-144.2deg) translate(0,-60px);
    -o-transform: rotate(-144.2deg) translate(0,-60px)
}

.progress-70 b:after {
    content: "70%"
}

.progress-71 {
    background-image: linear-gradient(123.1deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-33.1deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-71:before {
    transform: rotate(-146.9deg) translate(0,-60px);
    -webkit-transform: rotate(-146.9deg) translate(0,-60px);
    -moz-transform: rotate(-146.9deg) translate(0,-60px);
    -ms-transform: rotate(-146.9deg) translate(0,-60px);
    -o-transform: rotate(-146.9deg) translate(0,-60px)
}
.progress-71 b:after {
    content: "71%"
}

.progress-72 {
    background-image: linear-gradient(120.4deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-30.4deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-72:before {
    transform: rotate(-149.6deg) translate(0,-60px);
    -webkit-transform: rotate(-149.6deg) translate(0,-60px);
    -moz-transform: rotate(-149.6deg) translate(0,-60px);
    -ms-transform: rotate(-149.6deg) translate(0,-60px);
    -o-transform: rotate(-149.6deg) translate(0,-60px)
}

.progress-72 b:after {
    content: "72%"
}

.progress-73 {
    background-image: linear-gradient(117.7deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-27.7deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-73:before {
    transform: rotate(-152.3deg) translate(0,-60px);
    -webkit-transform: rotate(-152.3deg) translate(0,-60px);
    -moz-transform: rotate(-152.3deg) translate(0,-60px);
    -ms-transform: rotate(-152.3deg) translate(0,-60px);
    -o-transform: rotate(-152.3deg) translate(0,-60px)
}

.progress-73 b:after {
    content: "73%"
}

.progress-74 {
    background-image: linear-gradient(115deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-25deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-74:before {
    transform: rotate(-155deg) translate(0,-60px);
    -webkit-transform: rotate(-155deg) translate(0,-60px);
    -moz-transform: rotate(-155deg) translate(0,-60px);
    -ms-transform: rotate(-155deg) translate(0,-60px);
    -o-transform: rotate(-155deg) translate(0,-60px)
}

.progress-74 b:after {
    content: "74%"
}

.progress-75 {
    background-image: linear-gradient(112.3deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-22.3deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-75:before {
    transform: rotate(-157.7deg) translate(0,-60px);
    -webkit-transform: rotate(-157.7deg) translate(0,-60px);
    -moz-transform: rotate(-157.7deg) translate(0,-60px);
    -ms-transform: rotate(-157.7deg) translate(0,-60px);
    -o-transform: rotate(-157.7deg) translate(0,-60px)
}

.progress-75 b:after {
    content: "75%"
}

.progress-76 {
    background-image: linear-gradient(109.6deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-19.6deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-76:before {
    transform: rotate(-160.4deg) translate(0,-60px);
    -webkit-transform: rotate(-160.4deg) translate(0,-60px);
    -moz-transform: rotate(-160.4deg) translate(0,-60px);
    -ms-transform: rotate(-160.4deg) translate(0,-60px);
    -o-transform: rotate(-160.4deg) translate(0,-60px)
}

.progress-76 b:after {
    content: "76%"
}

.progress-77 {
    background-image: linear-gradient(106.9deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-16.9deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-77:before {
    transform: rotate(-163.1deg) translate(0,-60px);
    -webkit-transform: rotate(-163.1deg) translate(0,-60px);
    -moz-transform: rotate(-163.1deg) translate(0,-60px);
    -ms-transform: rotate(-163.1deg) translate(0,-60px);
    -o-transform: rotate(-163.1deg) translate(0,-60px)
}

.progress-77 b:after {
    content: "77%"
}

.progress-78 {
    background-image: linear-gradient(104.2deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-14.2deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-78:before {
    transform: rotate(-165.8deg) translate(0,-60px);
    -webkit-transform: rotate(-165.8deg) translate(0,-60px);
    -moz-transform: rotate(-165.8deg) translate(0,-60px);
    -ms-transform: rotate(-165.8deg) translate(0,-60px);
    -o-transform: rotate(-165.8deg) translate(0,-60px)
}

.progress-78 b:after {
    content: "78%"
}

.progress-79 {
    background-image: linear-gradient(101.5deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-11.5deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-79:before {
    transform: rotate(-168.5deg) translate(0,-60px);
    -webkit-transform: rotate(-168.5deg) translate(0,-60px);
    -moz-transform: rotate(-168.5deg) translate(0,-60px);
    -ms-transform: rotate(-168.5deg) translate(0,-60px);
    -o-transform: rotate(-168.5deg) translate(0,-60px)
}
.progress-79 b:after {
    content: "79%"
}

.progress-80 {
    background-image: linear-gradient(98.8deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-8.8deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-80:before {
    transform: rotate(-171.2deg) translate(0,-60px);
    -webkit-transform: rotate(-171.2deg) translate(0,-60px);
    -moz-transform: rotate(-171.2deg) translate(0,-60px);
    -ms-transform: rotate(-171.2deg) translate(0,-60px);
    -o-transform: rotate(-171.2deg) translate(0,-60px)
}

.progress-80 b:after {
    content: "80%"
}

.progress-81 {
    background-image: linear-gradient(96.1deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-6.1deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-81:before {
    transform: rotate(-173.9deg) translate(0,-60px);
    -webkit-transform: rotate(-173.9deg) translate(0,-60px);
    -moz-transform: rotate(-173.9deg) translate(0,-60px);
    -ms-transform: rotate(-173.9deg) translate(0,-60px);
    -o-transform: rotate(-173.9deg) translate(0,-60px)
}

.progress-81 b:after {
    content: "81%"
}

.progress-82 {
    background-image: linear-gradient(93.4deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-3.4deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-82:before {
    transform: rotate(-176.6deg) translate(0,-60px);
    -webkit-transform: rotate(-176.6deg) translate(0,-60px);
    -moz-transform: rotate(-176.6deg) translate(0,-60px);
    -ms-transform: rotate(-176.6deg) translate(0,-60px);
    -o-transform: rotate(-176.6deg) translate(0,-60px)
}

.progress-82 b:after {
    content: "82%"
}

.progress-83 {
    background-image: linear-gradient(90.7deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(-0.7deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-83:before {
    transform: rotate(-179.3deg) translate(0,-60px);
    -webkit-transform: rotate(-179.3deg) translate(0,-60px);
    -moz-transform: rotate(-179.3deg) translate(0,-60px);
    -ms-transform: rotate(-179.3deg) translate(0,-60px);
    -o-transform: rotate(-179.3deg) translate(0,-60px)
}

.progress-83 b:after {
    content: "83%"
}

.progress-84 {
    background-image: linear-gradient(88deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(2deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-84:before {
    transform: rotate(-182deg) translate(0,-60px);
    -webkit-transform: rotate(-182deg) translate(0,-60px);
    -moz-transform: rotate(-182deg) translate(0,-60px);
    -ms-transform: rotate(-182deg) translate(0,-60px);
    -o-transform: rotate(-182deg) translate(0,-60px)
}

.progress-84 b:after {
    content: "84%"
}

.progress-85 {
    background-image: linear-gradient(85.3deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(4.7deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-85:before {
    transform: rotate(-184.7deg) translate(0,-60px);
    -webkit-transform: rotate(-184.7deg) translate(0,-60px);
    -moz-transform: rotate(-184.7deg) translate(0,-60px);
    -ms-transform: rotate(-184.7deg) translate(0,-60px);
    -o-transform: rotate(-184.7deg) translate(0,-60px)
}

.progress-85 b:after {
    content: "85%"
}

.progress-86 {
    background-image: linear-gradient(82.6deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(7.4deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-86:before {
    transform: rotate(-187.4deg) translate(0,-60px);
    -webkit-transform: rotate(-187.4deg) translate(0,-60px);
    -moz-transform: rotate(-187.4deg) translate(0,-60px);
    -ms-transform: rotate(-187.4deg) translate(0,-60px);
    -o-transform: rotate(-187.4deg) translate(0,-60px)
}

.progress-86 b:after {
    content: "86%"
}

.progress-87 {
    background-image: linear-gradient(79.9deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(10.1deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-87:before {
    transform: rotate(-190.1deg) translate(0,-60px);
    -webkit-transform: rotate(-190.1deg) translate(0,-60px);
    -moz-transform: rotate(-190.1deg) translate(0,-60px);
    -ms-transform: rotate(-190.1deg) translate(0,-60px);
    -o-transform: rotate(-190.1deg) translate(0,-60px)
}
.progress-87 b:after {
    content: "87%"
}

.progress-88 {
    background-image: linear-gradient(77.2deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(12.8deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-88:before {
    transform: rotate(-192.8deg) translate(0,-60px);
    -webkit-transform: rotate(-192.8deg) translate(0,-60px);
    -moz-transform: rotate(-192.8deg) translate(0,-60px);
    -ms-transform: rotate(-192.8deg) translate(0,-60px);
    -o-transform: rotate(-192.8deg) translate(0,-60px)
}

.progress-88 b:after {
    content: "88%"
}

.progress-89 {
    background-image: linear-gradient(74.5deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(15.5deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-89:before {
    transform: rotate(-195.5deg) translate(0,-60px);
    -webkit-transform: rotate(-195.5deg) translate(0,-60px);
    -moz-transform: rotate(-195.5deg) translate(0,-60px);
    -ms-transform: rotate(-195.5deg) translate(0,-60px);
    -o-transform: rotate(-195.5deg) translate(0,-60px)
}

.progress-89 b:after {
    content: "89%"
}

.progress-90 {
    background-image: linear-gradient(71.8deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(18.2deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-90:before {
    transform: rotate(-198.2deg) translate(0,-60px);
    -webkit-transform: rotate(-198.2deg) translate(0,-60px);
    -moz-transform: rotate(-198.2deg) translate(0,-60px);
    -ms-transform: rotate(-198.2deg) translate(0,-60px);
    -o-transform: rotate(-198.2deg) translate(0,-60px)
}

.progress-90 b:after {
    content: "90%"
}

.progress-91 {
    background-image: linear-gradient(69.1deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(20.9deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-91:before {
    transform: rotate(-200.9deg) translate(0,-60px);
    -webkit-transform: rotate(-200.9deg) translate(0,-60px);
    -moz-transform: rotate(-200.9deg) translate(0,-60px);
    -ms-transform: rotate(-200.9deg) translate(0,-60px);
    -o-transform: rotate(-200.9deg) translate(0,-60px)
}

.progress-91 b:after {
    content: "91%"
}

.progress-92 {
    background-image: linear-gradient(66.4deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(23.6deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-92:before {
    transform: rotate(-203.6deg) translate(0,-60px);
    -webkit-transform: rotate(-203.6deg) translate(0,-60px);
    -moz-transform: rotate(-203.6deg) translate(0,-60px);
    -ms-transform: rotate(-203.6deg) translate(0,-60px);
    -o-transform: rotate(-203.6deg) translate(0,-60px)
}

.progress-92 b:after {
    content: "92%"
}

.progress-93 {
    background-image: linear-gradient(63.7deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(26.3deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-93:before {
    transform: rotate(-206.3deg) translate(0,-60px);
    -webkit-transform: rotate(-206.3deg) translate(0,-60px);
    -moz-transform: rotate(-206.3deg) translate(0,-60px);
    -ms-transform: rotate(-206.3deg) translate(0,-60px);
    -o-transform: rotate(-206.3deg) translate(0,-60px)
}

.progress-93 b:after {
    content: "93%"
}

.progress-94 {
    background-image: linear-gradient(61deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(29deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-94:before {
    transform: rotate(-209deg) translate(0,-60px);
    -webkit-transform: rotate(-209deg) translate(0,-60px);
    -moz-transform: rotate(-209deg) translate(0,-60px);
    -ms-transform: rotate(-209deg) translate(0,-60px);
    -o-transform: rotate(-209deg) translate(0,-60px)
}

.progress-94 b:after {
    content: "94%"
}

.progress-95 {
    background-image: linear-gradient(58.3deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(31.7deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-95:before {
    transform: rotate(-211.7deg) translate(0,-60px);
    -webkit-transform: rotate(-211.7deg) translate(0,-60px);
    -moz-transform: rotate(-211.7deg) translate(0,-60px);
    -ms-transform: rotate(-211.7deg) translate(0,-60px);
    -o-transform: rotate(-211.7deg) translate(0,-60px)
}
.progress-95 b:after {
    content: "95%"
}

.progress-96 {
    background-image: linear-gradient(55.6deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(34.4deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-96:before {
    transform: rotate(-214.4deg) translate(0,-60px);
    -webkit-transform: rotate(-214.4deg) translate(0,-60px);
    -moz-transform: rotate(-214.4deg) translate(0,-60px);
    -ms-transform: rotate(-214.4deg) translate(0,-60px);
    -o-transform: rotate(-214.4deg) translate(0,-60px)
}

.progress-96 b:after {
    content: "96%"
}

.progress-97 {
    background-image: linear-gradient(52.9deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(37.1deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-97:before {
    transform: rotate(-217.1deg) translate(0,-60px);
    -webkit-transform: rotate(-217.1deg) translate(0,-60px);
    -moz-transform: rotate(-217.1deg) translate(0,-60px);
    -ms-transform: rotate(-217.1deg) translate(0,-60px);
    -o-transform: rotate(-217.1deg) translate(0,-60px)
}

.progress-97 b:after {
    content: "97%"
}

.progress-98 {
    background-image: linear-gradient(50.2deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(39.8deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-98:before {
    transform: rotate(-219.8deg) translate(0,-60px);
    -webkit-transform: rotate(-219.8deg) translate(0,-60px);
    -moz-transform: rotate(-219.8deg) translate(0,-60px);
    -ms-transform: rotate(-219.8deg) translate(0,-60px);
    -o-transform: rotate(-219.8deg) translate(0,-60px)
}

.progress-98 b:after {
    content: "98%"
}

.progress-99 {
    background-image: linear-gradient(47.5deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(42.5deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-99:before {
    transform: rotate(-222.5deg) translate(0,-60px);
    -webkit-transform: rotate(-222.5deg) translate(0,-60px);
    -moz-transform: rotate(-222.5deg) translate(0,-60px);
    -ms-transform: rotate(-222.5deg) translate(0,-60px);
    -o-transform: rotate(-222.5deg) translate(0,-60px)
}

.progress-99 b:after {
    content: "99%"
}

.progress-100 {
    background-image: linear-gradient(44.8deg,#ea2c70 50%,transparent 50%,transparent),linear-gradient(135deg,#ea2c70 50%,#de1e60 50%,#de1e60);
    background-image: -webkit-linear-gradient(45deg,#ea2c70 50%,transparent 50%,transparent),-webkit-linear-gradient(-45deg,#ea2c70 50%,#de1e60 50%,#de1e60)
}

.progress-100:before {
    transform: rotate(-225.2deg) translate(0,-60px);
    -webkit-transform: rotate(-225.2deg) translate(0,-60px);
    -moz-transform: rotate(-225.2deg) translate(0,-60px);
    -ms-transform: rotate(-225.2deg) translate(0,-60px);
    -o-transform: rotate(-225.2deg) translate(0,-60px)
}

.progress-100 b:after {
    content: " "
}