fixed loading animation

Author: zesameri

css/main.css

@@ -53,51 +53,71 @@ a:focus {
 }
 
 .js .loading::after {
-	content: 'Pluto a planet?';
-  font-size: 1.625em;
+	content: '';
+	font-size: .62em;
 	font-weight: 500;
-	line-height: 1.5;
+	line-height: 3.8em;
+	letter-spacing: .62em;
 	margin: 0;
 	padding: 0.5em 0;
-	letter-spacing: 1.62em;
 	text-transform: uppercase;
+	text-align: center;
 
 	position: fixed;
 	z-index: 1001;
 	top: 50%;
 	left: 50%;
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  align-content: space-around;
-	width: 62vw;
-	height: 62vw;
-	margin: -31vw 0 0 -31vw;
+	width: 100px;
+	height: 100px;
+	margin: -50px 0 0 -50px;
   border-radius: 50%;
 	pointer-events: none;
-	background: #3F51B5;
-	/*animation: loaderAnim 4s ease-out infinite alternate forwards;*/
-  animation-name: loaderAnim;
-  animation-duration: 3s;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-  animation-timing-function: ease-in-out;
-  animation-fill-mode: both;
+	animation: loaderAnim 4s ease-in-out infinite normal forwards;
 }
 
 @keyframes loaderAnim {
-	to {
-		transform: scale3d(0.5,0.5,1);
-    background-color:#7670bd;
-    letter-spacing: 1em;
-	}
-  /*
-  0%   {background-color:#366bbd; left:25%; top:25%;}
-  25%  {background-color:#3d8fbd; left:75%; top:25%;}
-  50%  {background-color:#6a7dbd; left:75%; top:75%;}
-  75%  {background-color:#585abc; left:25%; top:75%;}
-  100% {background-color:#7670bd; left:25%; top:25%;}
-  */
+
+	0%  {
+    border-radius:5% 5% 5% 5%;
+    transform:rotate(0deg);
+		background: #3f51b5;
+  }
+  12%  {
+    border-radius:50% 5% 5% 5%;
+    transform:rotate(45deg);
+  }
+  25%  {
+    border-radius:50% 50% 5% 5%;
+    transform:rotate(90deg);
+		background: #2196f3;
+  }
+  37%  {
+    border-radius:50% 50% 50% 5%;
+    transform:rotate(135deg);
+  }
+  50% {
+     border-radius:50%;
+     transform:rotate(180deg);
+ 		 background: #03a9f4;
+  }
+	62%  {
+    border-radius:5% 50% 50% 50%;
+    transform:rotate(225deg);
+  }
+  75%  {
+    border-radius: 5% 5% 50% 50%;
+    transform:rotate(270deg);
+		background: #2196f3;
+  }
+  87%  {
+    border-radius:5% 5% 5% 50%;
+    transform:rotate(315deg);
+  }
+  100%  {
+    border-radius:5% 5% 5% 5%;
+    transform:rotate(360deg);
+		background: #3f51b5;
+  }
 }
 
 main {
@@ -119,7 +139,7 @@ main {
 }
 
 /* Header */
-.codrops-header {
+.header {
 	position: relative;
 	display: flex;
 	flex-direction: column;
@@ -128,7 +148,7 @@ main {
 	padding: 5vw;
 }
 
-.codrops-header__title {
+.header__title {
 	font-size: 1.625em;
 	font-weight: 500;
 	line-height: 1.5;
@@ -251,7 +271,7 @@ main {
 }
 
 @media screen and (max-width: 40em) {
-	.codrops-header__title {
+	.header__title {
 		font-size: 1em;
 	}
 	.content--grid {

index.html

@@ -53,9 +53,8 @@
 
   <main>
     <div class="content content--grid">
-      <header class="codrops-header">
-					<h1 class="codrops-header__title">meredith hoo</h1>
-					<p class="codrops-header__subtitle">i'm really cool</p>
+      <header class="header">
+					<h1 class="header__title">meredith hoo</h1>
 				</header>
 
       <div class="item item--style-1" data-animation-path-duration="800" data-animation-path-easing="easeInOutCubic" data-path-elasticity="300" data-morph-path="M 189,80.37 C 232.6,46.67 352.5,67.06 350.9,124.1 349.5,173.4 311.7,168 312.4,248.1 312.9,301.1 382.5,319.2 368.5,379.1 349.4,460.6 137.7,467.5 117.6,386.3 98.68,309.7 171.5,292.2 183.6,240.1 195.7,188.2 123.8,130.7 189,80.37 Z" data-path-scaleX="0.8" data-path-scaleY="1.1" data-path-translateX="0" data-path-translateY="30" data-path-rotate="5" data-animation-image-duration="800" data-animation-image-easing="easeInOutQuart" data-image-elasticity="300" data-image-scaleX="1.2" data-image-scaleY="1.2" data-image-translateX="-20" data-image-translateY="-45" data-image-rotate="-5" data-animation-deco-duration="1300" data-animation-deco-easing="easeOutQuad" data-deco-elasticity="300" data-deco-scaleX="0.8" data-deco-scaleY="0.9" data-deco-translateX="-5" data-deco-translateY="-5" data-deco-rotate="2">