.circle-progress {
	border-radius: 50%;

	&-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		position: relative;
	}

	&-bar {
		position: relative;
		margin-left: auto;
		margin-right: auto;

		.position-in-circle {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			.circle-counter {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}
		}
	}

	transform: rotate(-90deg);

	&__meter,
	&__value {
		transition-property: all;
		transition-timing-function: cubic-bezier(.28,.77,.39,.95);
		fill: none;
		stroke-linecap: butt;
	}
}

.circle-counter {
	.circle-val {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}