diff --git a/less/_dot-bricks.less b/less/_dot-bricks.less
index dc33b6e..ebbc759 100644
--- a/less/_dot-bricks.less
+++ b/less/_dot-bricks.less
@@ -13,12 +13,11 @@
 @y2: -@spacing;
 
 .dot-bricks {
+  .dot;
+
   position: relative;
   top: @top-pos;
   left: @left-pos;
-
-  .dot;
-
   box-shadow:
     @x1 @y2 0 0 @dot-color,
     @x1 @y1 0 0 @dot-color,
diff --git a/less/_dot-carousel.less b/less/_dot-carousel.less
index 690c72c..c1ea085 100644
--- a/less/_dot-carousel.less
+++ b/less/_dot-carousel.less
@@ -10,11 +10,10 @@
 @x3: -@left-pos + @dot-spacing;
 
 .dot-carousel {
-  position: relative;
-  left: @left-pos;
-
   .dot;
 
+  position: relative;
+  left: @left-pos;
   box-shadow:
     @x1 0 0 0 @dot-color,
     @x2 0 0 0 @dot-color,
diff --git a/less/_dot-collision.less b/less/_dot-collision.less
index beab2e7..1c77448 100644
--- a/less/_dot-collision.less
+++ b/less/_dot-collision.less
@@ -5,10 +5,10 @@
  */
 
 .dot-collision {
-  position: relative;
-
   .dot;
 
+  position: relative;
+
   &::before,
   &::after {
     content: "";
@@ -18,18 +18,16 @@
   }
 
   &::before {
-    left: - @dot-width;
-
     .dot(@bg-color: @dot-before-color);
 
+    left: - @dot-width;
     animation: dot-collision-before 2s infinite ease-in;
   }
 
   &::after {
-    left: @dot-width;
-
     .dot(@bg-color: @dot-after-color);
 
+    left: @dot-width;
     animation: dot-collision-after 2s 1s infinite ease-in;
   }
 }
diff --git a/less/_dot-elastic.less b/less/_dot-elastic.less
index e018cc7..fba3b92 100644
--- a/less/_dot-elastic.less
+++ b/less/_dot-elastic.less
@@ -5,10 +5,9 @@
  */
 
 .dot-elastic {
-  position: relative;
-
   .dot;
 
+  position: relative;
   animation: dot-elastic 1s infinite linear;
 
   &::before,
@@ -20,18 +19,16 @@
   }
 
   &::before {
-    left: -@dot-spacing;
-
     .dot(@bg-color: @dot-before-color);
 
+    left: -@dot-spacing;
     animation: dot-elastic-before 1s infinite linear;
   }
 
   &::after {
-    left: @dot-spacing;
-
     .dot(@bg-color: @dot-after-color);
 
+    left: @dot-spacing;
     animation: dot-elastic-after 1s infinite linear;
   }
 }
diff --git a/less/_dot-falling.less b/less/_dot-falling.less
index 983634b..756b07f 100644
--- a/less/_dot-falling.less
+++ b/less/_dot-falling.less
@@ -23,11 +23,10 @@
 @color-after-1: rgba(@dot-after-color, 100%);
 
 .dot-falling {
-  position: relative;
-  left: @left-pos;
-
   .dot;
 
+  position: relative;
+  left: @left-pos;
   box-shadow: @x2 0 0 0 @dot-color;
   animation: dot-falling 1s infinite linear;
   animation-delay: .1s;
diff --git a/less/_dot-fire.less b/less/_dot-fire.less
index 3b87649..e994717 100644
--- a/less/_dot-fire.less
+++ b/less/_dot-fire.less
@@ -11,23 +11,22 @@
 @y3: 1.5 * @dot-spacing;
 
 .dot-fire {
-  position: relative;
-  left: @left-pos;
-
   .dot;
 
+  position: relative;
+  left: @left-pos;
   box-shadow: @x1 @y3 0 -5px @dot-color;
   animation: dot-fire 1.5s infinite linear;
   animation-delay: -.85s;
 
   &::before,
   &::after {
+    .dot;
+
     content: "";
     display: inline-block;
     position: absolute;
     top: 0;
-
-    .dot;
   }
 
   &::before {
diff --git a/less/_dot-flashing.less b/less/_dot-flashing.less
index 4efb0b2..ffd15ad 100644
--- a/less/_dot-flashing.less
+++ b/less/_dot-flashing.less
@@ -5,10 +5,9 @@
 */
 
 .dot-flashing {
-  position: relative;
-
   .dot;
 
+  position: relative;
   animation: dot-flashing 1s .5s infinite linear alternate;
 
   &::before,
@@ -20,18 +19,16 @@
   }
 
   &::before {
-    left: -@dot-spacing;
-
     .dot(@bg-color: @dot-before-color);
 
+    left: -@dot-spacing;
     animation: dot-flashing 1s infinite alternate;
   }
 
   &::after {
-    left: @dot-spacing;
-
     .dot(@bg-color: @dot-after-color);
 
+    left: @dot-spacing;
     animation: dot-flashing 1s 1s infinite alternate;
   }
 }
diff --git a/less/_dot-floating.less b/less/_dot-floating.less
index 72f6d4c..389f6b3 100644
--- a/less/_dot-floating.less
+++ b/less/_dot-floating.less
@@ -8,10 +8,9 @@
 @d-min: 12px;
 
 .dot-floating {
-  position: relative;
-
   .dot;
 
+  position: relative;
   animation: dot-floating 3s infinite cubic-bezier(.15, .6, .9, .1);
 
   &::before,
@@ -23,18 +22,16 @@
   }
 
   &::before {
-    left: -@d-min;
-
     .dot(@bg-color: @dot-before-color);
 
+    left: -@d-min;
     animation: dot-floating-before 3s infinite ease-in-out;
   }
 
   &::after {
-    left: -@d-min*2;
-
     .dot(@bg-color: @dot-after-color);
 
+    left: -@d-min*2;
     animation: dot-floating-after 3s infinite cubic-bezier(.4, 0, 1, 1);
   }
 }
diff --git a/less/_dot-gathering.less b/less/_dot-gathering.less
index 90610a9..23bae91 100644
--- a/less/_dot-gathering.less
+++ b/less/_dot-gathering.less
@@ -10,23 +10,21 @@
 @d: 50px;
 
 .dot-gathering {
-  position: relative;
-
   .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: @dot-color-hsl, @color: transparent);
 
+  position: relative;
   margin: -1px 0;
   filter: blur(2px);
 
   &::before,
   &::after {
+    .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: @dot-color-hsl, @color: transparent);
+
     content: '';
     display: inline-block;
     position: absolute;
     top: 0;
     left: -@d;
-
-    .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: @dot-color-hsl, @color: transparent);
-
     opacity: 0;
     filter: blur(2px);
     animation: dot-gathering 2s infinite ease-in;
diff --git a/less/_dot-hourglass.less b/less/_dot-hourglass.less
index b1f2e4c..2fd669c 100644
--- a/less/_dot-hourglass.less
+++ b/less/_dot-hourglass.less
@@ -12,11 +12,10 @@
 @originY: @dot-height/2 + @r;
 
 .dot-hourglass {
-  position: relative;
-  top: -@r;
-
   .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: @dot-color-hsl, @color: transparent);
 
+  position: relative;
+  top: -@r;
   margin: -1px 0;
   filter: blur(2px);
   transform-origin: @originX @originY;
diff --git a/less/_dot-overtaking.less b/less/_dot-overtaking.less
index ca01386..e38f440 100644
--- a/less/_dot-overtaking.less
+++ b/less/_dot-overtaking.less
@@ -8,10 +8,9 @@
 @dot-color-hsl: hsl(0, 100%, 0%);
 
 .dot-overtaking {
-  position: relative;
-
   .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: transparent, @color: @dot-color-hsl);
 
+  position: relative;
   margin: -1px 0;
   filter: blur(2px);
   box-shadow: 0 -20px 0 0;
diff --git a/less/_dot-pulse.less b/less/_dot-pulse.less
index e73e75b..ba9af2c 100644
--- a/less/_dot-pulse.less
+++ b/less/_dot-pulse.less
@@ -10,34 +10,31 @@
 @x3: -@left-pos + @dot-spacing;
 
 .dot-pulse {
-  position: relative;
-  left: @left-pos;
-
   .dot;
 
+  position: relative;
+  left: @left-pos;
   box-shadow: @x2 0 0 -5px;
   animation: dot-pulse 1.5s .25s infinite linear;
 
   &::before,
   &::after {
+    .dot;
+
     content: "";
     display: inline-block;
     position: absolute;
     top: 0;
-
-    .dot;
   }
 
   &::before {
     box-shadow: @x1 0 0 -5px;
     animation: dot-pulse-before 1.5s infinite linear;
-    animation-delay: 0s;
   }
 
   &::after {
     box-shadow: @x3 0 0 -5px;
-    animation: dot-pulse-after 1.5s infinite linear;
-    animation-delay: .5s;
+    animation: dot-pulse-after 1.5s .5s infinite linear;
   }
 }
 
diff --git a/less/_dot-revolution.less b/less/_dot-revolution.less
index 86bac4c..253f43e 100644
--- a/less/_dot-revolution.less
+++ b/less/_dot-revolution.less
@@ -11,8 +11,6 @@
 
   &::before,
   &::after {
-    .dot;
-
     content: "";
     display: inline-block;
     position: absolute;
@@ -20,17 +18,21 @@
   }
 
   &::before {
-    animation: dot-revolution 1.4s linear infinite;
+    .dot(@bg-color: @dot-before-color);
+
     left: 0;
     top: -@dot-spacing;
     transform-origin: @dot-width/2 (@dot-spacing + @dot-width/2);
+    animation: dot-revolution 1.4s linear infinite;
   }
 
   &::after {
-    animation: dot-revolution 1s linear infinite;
+    .dot(@bg-color: @dot-after-color);
+
     left: 0;
     top: -@dot-spacing*2;
     transform-origin: @dot-width/2 (@dot-spacing*2 + @dot-width/2);
+    animation: dot-revolution 1s linear infinite;
   }
 }
 
diff --git a/less/_dot-shuttle.less b/less/_dot-shuttle.less
index 0788e2d..ab12078 100644
--- a/less/_dot-shuttle.less
+++ b/less/_dot-shuttle.less
@@ -1,50 +1,54 @@
 /**
  * ==============================================
- * Experiment-Gooey Effect
+ * Experimental: Gooey Effect
  * Dot Shuttle
  * ==============================================
  */
 
+@d: 3 * @dot-spacing;
 @dot-color-hsl: hsl(0, 100%, 0%);
 
-@d: 50px;
-
 .dot-shuttle {
   .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: @dot-color-hsl, @color: transparent);
 
-  filter: blur(2px);
-  margin: -1px 0;
   position: relative;
+  left: -@dot-spacing;
+  margin: -1px 0;
+  filter: blur(2px);
 
   &::before,
   &::after {
     .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: @dot-color-hsl, @color: transparent);
 
-    animation: dot-shuttle 2s infinite ease-in;
-    content: "";
+    content: '';
     display: inline-block;
-    filter: blur(2px);
-    left: -@d;
-    opacity: 0;
     position: absolute;
     top: 0;
+    filter: blur(2px);
+  }
+
+  &::before {
+    left: @dot-spacing;
+    animation: dot-shuttle 2s infinite ease-out;
+  }
+
+  &::after {
+    left: 2 * @dot-spacing;
   }
-  &::after { animation-delay: 1s; }
 }
 
 @keyframes dot-shuttle {
-  0% {
-    opacity: 0;
+  0%,
+  50%,
+  100% {
     transform: translateX(0);
   }
 
-  50% {
-    opacity: 1;
-    transform: translateX(@d);
+  25% {
+    transform: translateX(-@d);
   }
 
-  100% {
-    opacity: 0;
-    transform: translateX(@d*2);
+  75% {
+    transform: translateX(@d);
   }
 }
diff --git a/less/_dot-spin.less b/less/_dot-spin.less
index 3699c13..e1bb412 100644
--- a/less/_dot-spin.less
+++ b/less/_dot-spin.less
@@ -20,7 +20,7 @@
 .dot-spin {
   .dot(@bg-color: transparent, @color: transparent);
 
-  animation: dot-spin 1.5s infinite linear;
+  position: relative;
   box-shadow:
     0 @-y1 0 0 @color-1,
     @x2 @-y2 0 0 @color-1,
@@ -30,7 +30,7 @@
     @-x2 @y2 0 0 @color-0,
     @-x1 0 0 0 @color-0,
     @-x2 @-y2 0 0 @color-0;
-  position: relative;
+  animation: dot-spin 1.5s infinite linear;
 }
 
 @keyframes dot-spin {
diff --git a/less/_dot-stretching.less b/less/_dot-stretching.less
index c3407e8..170c648 100644
--- a/less/_dot-stretching.less
+++ b/less/_dot-stretching.less
@@ -10,21 +10,29 @@
 .dot-stretching {
   .dot;
 
-  animation: dot-stretching 2s infinite ease-in;
   position: relative;
   transform: scale(1.25);
+  animation: dot-stretching 2s infinite ease-in;
 
   &::before,
   &::after {
-    .dot;
-
     content: "";
-    //display: inline-block;
+    display: inline-block;
     position: absolute;
     top: 0;
   }
-  &::before { animation: dot-stretching-before 2s infinite ease-in; }
-  &::after { animation: dot-stretching-after 2s infinite ease-in; }
+
+  &::before {
+    .dot(@bg-color: @dot-before-color);
+
+    animation: dot-stretching-before 2s infinite ease-in;
+  }
+
+  &::after {
+    .dot(@bg-color: @dot-after-color);
+
+    animation: dot-stretching-after 2s infinite ease-in;
+  }
 }
 
 @keyframes dot-stretching {
diff --git a/less/_dot-typing.less b/less/_dot-typing.less
index 6251dc0..b5b5a33 100644
--- a/less/_dot-typing.less
+++ b/less/_dot-typing.less
@@ -12,62 +12,62 @@
 .dot-typing {
   .dot;
 
-  animation: dot-typing 1.5s infinite linear;
+  position: relative;
+  left: @left-pos;
   box-shadow:
-    @x1 0 0 0 @dot-color,
+    @x1 0 0 0 @dot-before-color,
     @x2 0 0 0 @dot-color,
-    @x3 0 0 0 @dot-color;
-  left: @left-pos;
-  position: relative;
+    @x3 0 0 0 @dot-after-color;
+  animation: dot-typing 1.5s infinite linear;
 }
 
 @keyframes dot-typing {
   0% {
     box-shadow:
-      @x1 0 0 0 @dot-color,
+      @x1 0 0 0 @dot-before-color,
       @x2 0 0 0 @dot-color,
-      @x3 0 0 0 @dot-color;
+      @x3 0 0 0 @dot-after-color;
   }
 
   16.6667% {
     box-shadow:
-      @x1 -10px 0 0 @dot-color,
+      @x1 -10px 0 0 @dot-before-color,
       @x2 0 0 0 @dot-color,
-      @x3 0 0 0 @dot-color;
+      @x3 0 0 0 @dot-after-color;
   }
 
   33.3333% {
     box-shadow:
-      @x1 0 0 0 @dot-color,
+      @x1 0 0 0 @dot-before-color,
       @x2 0 0 0 @dot-color,
-      @x3 0 0 0 @dot-color;
+      @x3 0 0 0 @dot-after-color;
   }
 
   50% {
     box-shadow:
-      @x1 0 0 0 @dot-color,
+      @x1 0 0 0 @dot-before-color,
       @x2 -10px 0 0 @dot-color,
-      @x3 0 0 0 @dot-color;
+      @x3 0 0 0 @dot-after-color;
   }
 
   66.6667% {
     box-shadow:
-      @x1 0 0 0 @dot-color,
+      @x1 0 0 0 @dot-before-color,
       @x2 0 0 0 @dot-color,
-      @x3 0 0 0 @dot-color;
+      @x3 0 0 0 @dot-after-color;
   }
 
   83.3333% {
     box-shadow:
-      @x1 0 0 0 @dot-color,
+      @x1 0 0 0 @dot-before-color,
       @x2 0 0 0 @dot-color,
-      @x3 -10px 0 0 @dot-color;
+      @x3 -10px 0 0 @dot-after-color;
   }
 
   100% {
     box-shadow:
-      @x1 0 0 0 @dot-color,
+      @x1 0 0 0 @dot-before-color,
       @x2 0 0 0 @dot-color,
-      @x3 0 0 0 @dot-color;
+      @x3 0 0 0 @dot-after-color;
   }
 }
diff --git a/less/_dot-windmill.less b/less/_dot-windmill.less
index d13f64a..66cbb93 100644
--- a/less/_dot-windmill.less
+++ b/less/_dot-windmill.less
@@ -5,21 +5,19 @@
  */
 
 @r: 15px;
-@originX: 5px;
-@originY: 5px + @r;
+@origin-x: 5px;
+@origin-y: 5px + @r;
 
 .dot-windmill {
   .dot;
 
-  animation: dot-windmill 2s infinite linear;
   position: relative;
   top: -@r;
-  transform-origin: @originX @originY;
+  transform-origin: @origin-x @origin-y;
+  animation: dot-windmill 2s infinite linear;
 
   &::before,
   &::after {
-    .dot;
-
     content: "";
     display: inline-block;
     position: absolute;
@@ -27,11 +25,15 @@
   }
 
   &::before {
+    .dot(@bg-color: @dot-before-color);
+
     left: -(@r/2*1.732);
     top: @r + @r/2;
   }
 
   &::after {
+    .dot(@bg-color: @dot-after-color);
+
     left: @r/2*1.732;
     top: @r + @r/2;
   }
diff --git a/less/three-dots.less b/less/three-dots.less
index 9064781..c49be59 100644
--- a/less/three-dots.less
+++ b/less/three-dots.less
@@ -3,6 +3,7 @@
 // ------------------------------
 @import "variables";
 @import "mixins";
+// Basic
 @import "dot-elastic";
 @import "dot-pulse";
 @import "dot-flashing";
@@ -17,8 +18,10 @@
 @import "dot-spin";
 @import "dot-falling";
 @import "dot-stretching";
-// Experiment
-@import "dot-shuttle";
+// Experimental
+@import "dot-gathering";
 @import "dot-hourglass";
 @import "dot-overtaking";
-@import "dot-emoji";
+@import "dot-shuttle";
+@import "dot-bouncing";
+@import "dot-rolling";