body {
			background: #eeeeee;
			font-family: Roboto;
		}
		.progress {
			width: 200px;
			height: 200px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.progress:before {
			content: "";
			position: absolute;
			width: 180px;
			height: 180px;
			background: #eeeeee;
			border-radius: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 99;
		}
		.progress .precent {
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 99;
			transform: translate(-50%, -50%);
			font-size: 35px;
			color: #214c8b;
		}
		.progress .circle {
			width: 200px;
			height: 200px;
			background-image: linear-gradient(135deg, #5efce8 10%, #736efe 100%);
			-webkit-clip-path: polygon(
				0% 100%,
				0% 0%,
				100% 0%,
				50% 50%,
				100% 0%,
				100% 100%
				);
			clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 50% 50%, 100% 0%, 100% 100%);
			animation-name: loading;
			animation-duration: 5s;
			animation-iteration-count: infinite;
			animation-timing-function: cubic-bezier(0, 0.1, 0.9, 0.81);
			animation-play-state: paused;
			animation-direction: reverse;
			animation-delay: 5s;
			border-radius: 100%;
		}
		@@keyframes loading {
			0% {
				-webkit-clip-path: polygon(
					0% 100%,
					0% 0%,
					100% 0%,
					50% 50%,
					100% 0%,
					100% 100%
					);
				clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 50% 50%, 100% 0%, 100% 100%);
			}
			25% {
				-webkit-clip-path: polygon(
					0% 100%,
					0% 0%,
					100% 0%,
					50% 50%,
					100% 100%,
					100% 100%
					);
				clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 50% 50%, 100% 100%, 100% 100%);
			}
			50% {
				-webkit-clip-path: polygon(
					0% 100%,
					0% 0%,
					100% 0%,
					50% 50%,
					0% 100%,
					0% 100%
					);
				clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 50% 50%, 0% 100%, 0% 100%);
			}
			75% {
				-webkit-clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 50% 50%, 0% 0%, 0% 0%);
				clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 50% 50%, 0% 0%, 0% 0%);
			}
			100% {
				-webkit-clip-path: polygon(
					0% 100%,
					0% 0%,
					100% 0%,
					50% 50%,
					100% 0%,
					0% 0%
					);
				clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 50% 50%, 100% 0%, 0% 0%);
			}
		}
		.progress .range {
			margin-top: 20px;
		}
		.progress input[type="range"] {
			-webkit-appearance: none;
			width: 100%;
			background: transparent;
		}

		.progress input[type="range"]::-webkit-slider-thumb {
			-webkit-appearance: none;
		}

		.progress input[type="range"]:focus {
			outline: none;
		}

		.progress input[type="range"]::-webkit-slider-thumb {
			-webkit-appearance: none;
			height: 16px;
			width: 16px;
			border-radius: 100%;
			background: #2a438a;
			cursor: pointer;
			margin-top: -6px;
			z-index: 9;
			position: relative;
		}

		.progress input[type="range"]::-moz-range-thumb {
			height: 16px;
			width: 16px;
			border-radius: 100%;
			background: #2a438a;
			cursor: pointer;
			border: 0;
			z-index: 9;
			position: relative;
		}

		.progress input[type="range"]::-webkit-slider-runnable-track {
			width: 100%;
			height: 5px;
			cursor: pointer;
			background: #214c8b;
			border-radius: 20px;
		}

		.progress input[type="range"]::-moz-range-track {
			width: 100%;
			height: 5px;
			cursor: pointer;
			background: #214c8b;
			border-radius: 20px;
		}