Merge pull request #1 from lukehaas/step2

update style for load6

Author: fineanmol

css/load6.css

@@ -11,13 +11,11 @@
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
-  -webkit-animation: load6 1.7s infinite ease;
-  animation: load6 1.7s infinite ease;
+  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
+  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
 }
 @-webkit-keyframes load6 {
   0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
     box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
   }
   5%,
@@ -35,15 +33,11 @@
     box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
   }
   100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
     box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
   }
 }
 @keyframes load6 {
   0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
     box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
   }
   5%,
@@ -60,9 +54,27 @@
   38% {
     box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
   }
+  100% {
+    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
+  }
+}
+@-webkit-keyframes round {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes round {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
-    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
   }
 }

less/load6.less

@@ -15,27 +15,37 @@
     -webkit-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0);
-    -webkit-animation:load6 1.7s infinite ease;
-    animation:load6 1.7s infinite ease;
+    -webkit-animation:load6 1.7s infinite ease, round 1.7s infinite ease;
+    animation:load6 1.7s infinite ease, round 1.7s infinite ease;;
   }
 
 }
 @-webkit-keyframes load6 {.load6-frames;}
 @keyframes load6 {.load6-frames;}
 
-.load6-frames() {
+@-webkit-keyframes round {.round;}
+@keyframes round {.round;}
+
+.round() {
+  0% {
+    -webkit-transform:rotate(0deg);
+    transform:rotate(0deg);
+  }
+  100% {
+    -webkit-transform:rotate(360deg);
+    transform:rotate(360deg);
+  }
+}
 
+.load6-frames() {
   0% {
-  -webkit-transform:rotate(0deg);
-  transform:rotate(0deg);
   box-shadow:
   0 -0.83em 0 -0.4em,
   0 -0.83em 0 -0.42em,
   0 -0.83em 0 -0.44em,
   0 -0.83em 0 -0.46em,
   0 -0.83em 0 -0.477em;
   }
-
   5%,
   95% {
     box-shadow:
@@ -73,16 +83,12 @@
     -0.775em -0.297em 0 -0.46em,
     -0.82em -0.09em 0 -0.477em;
   }
-
   100% {
-    -webkit-transform:rotate(360deg);
-    transform:rotate(360deg);
     box-shadow:
     0 -0.83em 0 -0.4em,
     0 -0.83em 0 -0.42em,
     0 -0.83em 0 -0.44em,
     0 -0.83em 0 -0.46em,
     0 -0.83em 0 -0.477em;
   }
-  
 }