body {
  background: #f4f4f4;
}

.loader { 
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -150px 0 0 -150px;
		width: 260px;
		height: 300px;
	}
	
	.loader-triangle {
		width: 150px;
		height: 130px;
		left: 0;
		top: 0;
		position: absolute;
		animation-duration: 2.2s;
		animation-iteration-count: infinite;
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	
	.loader-triangle:before {
		content: "";
		position: absolute; 
		display: block;
		border-style: solid;
		border-width: 130px 75px 0;
		border-color: transparent;
		z-index: 1;
		animation-duration: 2.2s;
		animation-iteration-count: infinite;
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	
	.loader-triangle-1 {
		animation-name: loader-triangle-1;
	}
	
	.loader-triangle-1:before {
		animation-name: loader-triangle-before-1;
	}
	
	@keyframes loader-triangle-1 {
		0% { transform: translateX(88px) translateY(28px); }
		50% { transform: translateX(149px) translateY(182px); }
		100% { transform: translateX(88px) translateY(28px); }
	}
	
	@keyframes loader-triangle-before-1 {
		0% { transform: rotate(30deg); border-top-color: #BF55EC; }
		50% { transform: rotate(300deg); border-top-color: #22A7F0; }
		100% { transform: rotate(390deg); border-top-color: #BF55EC; }
	}
	
	.loader-triangle-2 {
		animation-name: loader-triangle-2;
	}
	
	.loader-triangle-2:before { 
		animation-name: loader-triangle-before-2;
	}
	
	@keyframes loader-triangle-2 {
		0% { transform: translateX(120px) translateY(84px); }
		50% { transform: translateX(55px) translateY(150px); }
		100% { transform: translateX(120px) translateY(84px); }
	}
	
	@keyframes loader-triangle-before-2 {
		0% { transform: rotate(90deg); border-top-color: #F62459; }
		50% { transform: rotate(360deg); border-top-color: #03C9A9; }
		100% { transform: rotate(450deg); border-top-color: #F62459; }
	}
	
	.loader-triangle-3 {
		animation-name: loader-triangle-3;
	}
	
	.loader-triangle-3:before {
		animation-name: loader-triangle-before-3;
	}
	
	@keyframes loader-triangle-3 {
		0% { transform: translateX(88px) translateY(140px); }
		50% { transform: translateX(-39px) translateY(182px); }
		100% { transform: translateX(88px) translateY(140px); }
	}
	
	@keyframes loader-triangle-before-3 {
		0% { transform: rotate(150deg); border-top-color: #E87E04; }
		50% { transform: rotate(420deg); border-top-color: #F7CA18; }
		100% { transform: rotate(510deg); border-top-color: #E87E04; }
	}
	
	.loader-triangle-4 {
		animation-name: loader-triangle-4;
	}
	
	.loader-triangle-4:before { 
		animation-name: loader-triangle-before-4;
	}
	
	@keyframes loader-triangle-4 {
		0% { transform: translateX(23px) translateY(140px); }
		50% { transform: translateX(-39px) translateY(-12px); }
		100% { transform: translateX(23px) translateY(140px); }
	}
	
	@keyframes loader-triangle-before-4 {
		0% { transform: rotate(210deg); border-top-color: #22A7F0; }
		50% { transform: rotate(480deg); border-top-color: #BF55EC; }
		100% { transform: rotate(570deg); border-top-color: #22A7F0; }
	}
	
	.loader-triangle-5 {
		animation-name: loader-triangle-5;
	}
	
	.loader-triangle-5:before { 
		animation-name: loader-triangle-before-5;
	}
	
	@keyframes loader-triangle-5 {
		0% { transform: translateX(-10px) translateY(84px); }
		50% { transform: translateX(55px) translateY(20px); }
		100% { transform: translateX(-10px) translateY(84px); }
	}
	
	@keyframes loader-triangle-before-5 {
		0% { transform: rotate(270deg); border-top-color: #03C9A9; }
		50% { transform: rotate(540deg); border-top-color: #F62459; }
		100% { transform: rotate(630deg); border-top-color: #03C9A9; }
	}
	
	.loader-triangle-6 {
		animation-name: loader-triangle-6;
	}
	
	.loader-triangle-6:before { 
		animation-name: loader-triangle-before-6;
	}
	
	@keyframes loader-triangle-6 {
		0% { transform: translateX(23px) translateY(28px); }
		50% { transform: translateX(149px) translateY(-12px); }
		100% { transform: translateX(23px) translateY(28px); }
	}
	
	@keyframes loader-triangle-before-6 {
		0% { transform: rotate(330deg); border-top-color: #F7CA18; }
		50% { transform: rotate(600deg); border-top-color: #E87E04; }
		100% { transform: rotate(690deg); border-top-color: #F7CA18; }
	}