* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.loader-wrapper-cover {
  width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fffaf6;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

 .wrapper {
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 margin: -100px;
	 width: 200px;
	 height: 200px;
	 background-color: transparent;
	 border: none;
	 -webkit-user-select: none;
}
 .wrapper .box-wrap {
	 width: 70%;
	 height: 70%;
	 margin: calc((100% - 70%)/2) calc((100% - 70%)/2);
	 position: relative;
	 transform: rotate(-45deg);
}
 .wrapper .box-wrap .box {
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 left: 0;
	 top: 0;
	 background: rgba(135, 0, 0, .6);
	 background: linear-gradient(to right, #1a5faa, #486fbc, #eab5a1, #8dd6ff, #4973c9, #d07ca7, #f4915e, #f5919e, #b46f89, #1a5faa, #486fbc);
	 background-position: 0% 50%;
	 background-size: 1000% 1000%;
	 visibility: hidden;
}
 .wrapper .box-wrap .box.one {
	 animation: moveGradient 15s infinite, oneMove 3.5s infinite;
}
 .wrapper .box-wrap .box.two {
	 animation: moveGradient 15s infinite, twoMove 3.5s 0.15s infinite;
}
 .wrapper .box-wrap .box.three {
	 animation: moveGradient 15s infinite, threeMove 3.5s 0.3s infinite;
}
 .wrapper .box-wrap .box.four {
	 animation: moveGradient 15s infinite, fourMove 3.5s 0.575s infinite;
}
 .wrapper .box-wrap .box.five {
	 animation: moveGradient 15s infinite, fiveMove 3.5s 0.725s infinite;
}
 .wrapper .box-wrap .box.six {
	 animation: moveGradient 15s infinite, sixMove 3.5s 0.875s infinite;
}
 @keyframes moveGradient {
	 to {
		 background-position: 100% 50%;
	}
}
 @keyframes oneMove {
	 0% {
		 visibility: visible;
		 clip-path: inset(0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 14.2857% {
		 clip-path: inset(0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 28.5714% {
		 clip-path: inset(35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 42.8571% {
		 clip-path: inset(35% 70% 35% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 57.1428% {
		 clip-path: inset(35% 70% 35% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 71.4285% {
		 clip-path: inset(0% 70% 70% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 85.7142% {
		 clip-path: inset(0% 70% 70% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 100% {
		 clip-path: inset(0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
}
 @keyframes twoMove {
	 0% {
		 visibility: visible;
		 clip-path: inset(0% 70% 70% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 14.2857% {
		 clip-path: inset(0% 70% 70% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 28.5714% {
		 clip-path: inset(0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 42.8571% {
		 clip-path: inset(0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 57.1428% {
		 clip-path: inset(35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 71.4285% {
		 clip-path: inset(35% 70% 35% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 85.7142% {
		 clip-path: inset(35% 70% 35% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 100% {
		 clip-path: inset(0% 70% 70% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
}
 @keyframes threeMove {
	 0% {
		 visibility: visible;
		 clip-path: inset(35% 70% 35% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 14.2857% {
		 clip-path: inset(35% 70% 35% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 28.5714% {
		 clip-path: inset(0% 70% 70% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 42.8571% {
		 clip-path: inset(0% 70% 70% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 57.1428% {
		 clip-path: inset(0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 71.4285% {
		 clip-path: inset(0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 85.7142% {
		 clip-path: inset(35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 100% {
		 clip-path: inset(35% 70% 35% 0 round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
}
 @keyframes fourMove {
	 0% {
		 visibility: visible;
		 clip-path: inset(35% 0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 14.2857% {
		 clip-path: inset(35% 0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 28.5714% {
		 clip-path: inset(35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 42.8571% {
		 clip-path: inset(70% 35% 0% 35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 57.1428% {
		 clip-path: inset(70% 35% 0% 35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 71.4285% {
		 clip-path: inset(70% 0 0 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 85.7142% {
		 clip-path: inset(70% 0 0 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 100% {
		 clip-path: inset(35% 0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
}
 @keyframes fiveMove {
	 0% {
		 visibility: visible;
		 clip-path: inset(70% 0 0 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 14.2857% {
		 clip-path: inset(70% 0 0 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 28.5714% {
		 clip-path: inset(35% 0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 42.8571% {
		 clip-path: inset(35% 0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 57.1428% {
		 clip-path: inset(35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 71.4285% {
		 clip-path: inset(70% 35% 0% 35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 85.7142% {
		 clip-path: inset(70% 35% 0% 35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 100% {
		 clip-path: inset(70% 0 0 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
}
 @keyframes sixMove {
	 0% {
		 visibility: visible;
		 clip-path: inset(70% 35% 0% 35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 14.2857% {
		 clip-path: inset(70% 35% 0% 35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 28.5714% {
		 clip-path: inset(70% 0 0 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 42.8571% {
		 clip-path: inset(70% 0 0 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 57.1428% {
		 clip-path: inset(35% 0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 71.4285% {
		 clip-path: inset(35% 0% 35% 70% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 85.7142% {
		 clip-path: inset(35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
	 100% {
		 clip-path: inset(70% 35% 0% 35% round 5%);
		 animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
	}
}