.loader
	i.loader__tile.loader__tile__1
	i.loader__tile.loader__tile__2
	i.loader__tile.loader__tile__3
	i.loader__tile.loader__tile__4
	i.loader__tile.loader__tile__5
	i.loader__tile.loader__tile__6
	i.loader__tile.loader__tile__7
	i.loader__tile.loader__tile__8
	i.loader__tile.loader__tile__9
View Compiled
$colors-logo: (
	1: #943048,
	2: #d7532d,
	3: #d2cabb,
	4: #9faad0,
	5: #b39a3b,
	6: #dc2c34,
	7: #ece5be,
	8: #d07500,
	9: #7983a9
);

// ==========================================================================
// Loader Base
// ==========================================================================

$loader-size: 100px;
$animation-duration: 2s;
$animation-delay: .1s;

.loader {
	width: $loader-size;
	height: $loader-size;
	perspective: $loader-size;
	
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -($loader-size/2);
	margin-left: -($loader-size/2);
}


.loader__tile {
	display: block;
	float: left;
	width: 33.33%;
	height: 33.33%;

	animation-name: flip;
  transform-style: preserve-3d;
  animation-iteration-count: infinite;
  animation-duration: $animation-duration;
  animation-timing-function: ease-in-out;
  transform: rotateY(0deg);
  z-index: 0;
}



// ==========================================================================
// Loader Parts
// ==========================================================================

@each $key, $color in $colors-logo {
	.loader__tile__#{$key} {
		background-color: $color;
		animation-delay: ($animation-delay * $key);
	}
}




// ==========================================================================
// Loader Animation
// ==========================================================================

@keyframes flip {
  0% { transform: rotateY(0deg); }
	11% { transform: rotateY(180deg); }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.