.progress{
	width: 150px;
	height: 150px;
	line-height: 150px;
	background: none;
	margin: 0 auto;
	box-shadow: none;
	position: relative;
}
.progress:after{
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 12px solid #fff;
	position: absolute;
	top: 0;
	left: 0;
}
.progress > span{
	width: 50%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 1;
}
.progress .progress-left{
	left: 0;
}
.progress .progress-bar{
	width: 100%;
	height: 100%;
	background: none;
	border-width: 12px;
	border-style: solid;
	position: absolute;
	top: 0;
}
.progress .progress-left .progress-bar{
	left: 100%;
	border-top-right-radius: 80px;
	border-bottom-right-radius: 80px;
	border-left: 0;
	-webkit-transform-origin: center left;
	transform-origin: center left;
}
.progress .progress-right{
	right: 0;
}
.progress .progress-right .progress-bar{
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-0 1.8s linear forwards;
}

.progress .progress-right .progress-5{
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-5 1.8s linear forwards;
}

.progress .progress-right .progress-10{
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-10 1.8s linear forwards;
}

.progress .progress-right .progress-15{
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-15 1.8s linear forwards;
}

.progress .progress-right .progress-20{
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-20 1.8s linear forwards;
}

.progress .progress-right .progress-25{
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-25 1.8s linear forwards;
}

.progress .progress-right .progress-30{
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-30 1.8s linear forwards;
}

.progress .progress-right .progress-35{
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-35 1.8s linear forwards;
}

.progress .progress-right .progress-40{
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-40 1.8s linear forwards;
}

.progress .progress-right .progress-45{
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-45 1.8s linear forwards;
}
.progress .progress-right .progress-50{
	left: -100%;
	border-top-left-radius: 80px;
	border-bottom-left-radius: 80px;
	border-right: 0;
	-webkit-transform-origin: center right;
	transform-origin: center right;
	animation: loading-50 1.8s linear forwards;
}


.progress .progress-value{
	width: 90%;
	height: 90%;
	border-radius: 50%;
	background: #44484b;
	font-size: 24px;
	color: #fff;
	line-height: 135px;
	text-align: center;
	position: absolute;
	top: 5%;
	left: 5%;
}
.progress.blue .progress-bar{
	border-color: #049dff;
}
.progress.blue .progress-left .progress-bar{
	animation: loading-0 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
	border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar{
	animation: loading-0 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-55{
	animation: loading-55 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-60{
	animation: loading-60 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-65{
	animation: loading-65 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-70{
	animation: loading-70 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-75{
	animation: loading-75 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-80{
	animation: loading-80 1s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-85{
	animation: loading-85 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-90{
	animation: loading-90 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-95{
	animation: loading-95 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-100{
	animation: loading-100 1.5s linear forwards 1.8s;
}


.progress.pink .progress-bar{
	border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
	animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
	border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
	animation: loading-5 1.2s linear forwards 1.8s;
}
@keyframes loading-0{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes loading-5{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(18deg);
		transform: rotate(18deg);
	}
}
@keyframes loading-10{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(36deg);
		transform: rotate(36deg);
	}
}
@keyframes loading-15{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(54deg);
		transform: rotate(54deg);
	}
}
@keyframes loading-20{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(72deg);
		transform: rotate(72deg);
	}
}
@keyframes loading-25{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}
@keyframes loading-30{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(108deg);
		transform: rotate(108deg);
	}
}
@keyframes loading-35{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(126deg);
		transform: rotate(126deg);
	}
}
@keyframes loading-40{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(144deg);
		transform: rotate(144deg);
	}
}
@keyframes loading-45{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(162deg);
		transform: rotate(162deg);
	}
}
@keyframes loading-50{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@keyframes loading-55{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(18deg);
		transform: rotate(18deg);
	}
}
@keyframes loading-60{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(36deg);
		transform: rotate(36deg);
	}
}
@keyframes loading-65{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(54deg);
		transform: rotate(54deg);
	}
}
@keyframes loading-70{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(72deg);
		transform: rotate(72deg);
	}
}
@keyframes loading-75{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}
@keyframes loading-80{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(108deg);
		transform: rotate(108deg);
	}
}
@keyframes loading-85{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(126deg);
		transform: rotate(126deg);
	}
}
@keyframes loading-90{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(144deg);
		transform: rotate(144deg);
	}
}
@keyframes loading-95{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(162deg);
		transform: rotate(162deg);
	}
}
@keyframes loading-100{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}


@media only screen and (max-width: 990px){
	.progress{ margin-bottom: 20px; }
}