.loader {
	 position: relative;
	 margin: 0 auto;
	 width: 100px;
}
 .loader:before {
	 content: '';
	 display: block;
	 padding-top: 100%;
}
 .circular {
	 animation: rotate 2s linear infinite;
	 height: 100%;
	 transform-origin: center center;
	 width: 100%;
	 position: absolute;
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 margin: auto;
}
 .path {
	 stroke-dasharray: 1, 200;
	 stroke-dashoffset: 0;
	 animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
	 stroke-linecap: round;
}
 @keyframes rotate {
	 100% {
		 transform: rotate(360deg);
	}
}
 @keyframes dash {
	 0% {
		 stroke-dasharray: 1, 200;
		 stroke-dashoffset: 0;
	}
	 50% {
		 stroke-dasharray: 89, 200;
		 stroke-dashoffset: -35px;
	}
	 100% {
		 stroke-dasharray: 89, 200;
		 stroke-dashoffset: -124px;
	}
}
 @keyframes color {
	 100%, 0% {
		 stroke: #d62d20;
	}
	 40% {
		 stroke: #0057e7;
	}
	 66% {
		 stroke: #008744;
	}
	 80%, 90% {
		 stroke: #ffa700;
	}
}
 
 .showbox {
	 display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsla(0,0%,100%,1);
    z-index: 100000;
}