diff --git a/gui/css/gui.css b/gui/css/gui.css
index 1543816..af67178 100644
--- a/gui/css/gui.css
+++ b/gui/css/gui.css
@@ -61,8 +61,8 @@ input {
 }
 #gui .result .frame {
   float: left;
-  width: 200px;
-  height: 200px;
+  width: 230px;
+  height: 230px;
   position: relative;
   border: 1px solid #e0e0e0;
   border-top-color: #dcdcdc;
@@ -113,10 +113,9 @@ input {
   cursor: default;
 }
 
-
 #gui .modify {
   float: right;
-  width: 480px;
+  width: 450px;
   margin-bottom: 18px;
 }
 
@@ -124,17 +123,17 @@ input {
   float: left;
   clear: both;
   width: 100%;
-  margin-bottom: 10px;
+  margin-bottom: 3px;
   line-height: 20px;
 }
 #gui .option label {
   float: left;
-  width: 80px;
+  width: 100px;
 }
 #gui .option .slider {
   float: left;
   position: relative;
-  width: 300px;
+  width: 260px;
   margin-top: 4px;
 }
 #gui .option input.value {
diff --git a/gui/index.html b/gui/index.html
index d44c3e3..4052f38 100644
--- a/gui/index.html
+++ b/gui/index.html
@@ -47,7 +47,7 @@ <h1 id='title'>Spinners</h1>
 	    </div>
     </div>
     
-    
+
     <form class='modify'>
       <div class='option'>
         <label>radius</label>
@@ -87,14 +87,32 @@ <h1 id='title'>Spinners</h1>
       
       <div class='option'>
         <label>rotation</label>
-        <div class='slider'data-slider-min='100' data-slider-max='2500' data-slider-step='50'><!-- [] --></div>
-        <input type='text' class='value' name='rotation' value='700'/>
+        <div class='slider' data-slider-min='100' data-slider-max='3000' data-slider-step='50'><!-- [] --></div>
+        <input type='text' class='value' name='rotation' value='1400'/>
+      </div>
+
+      <div class='option'>
+        <label>fadeOutSpeed</label>
+        <div class='slider' data-slider-min='-8' data-slider-max='8' data-slider-step='1'><!-- [] --></div>
+        <input type='text' class='value' name='fadeOutSpeed' value='0'/>
       </div>
       
       <div class='option option-color'>
         <label>color</label>
         <input type='text' name='color' value='#000000' size='7'/>
       </div>
+
+      <div class='option option-color'>
+        <label>pauseColor</label>
+        <input type='text' name='pauseColor' value='#000000' size='7'/>
+      </div>
+
+      <div class='option'>
+        <label>pauseOpacity</label>
+        <div class='slider' data-slider-min='0' data-slider-max='1' data-slider-step='.01'><!-- [] --></div>
+        <input type='text' class='value' name='pauseOpacity' value='0.40'/>
+      </div>
+
     </form>
     
     <div class='code'>
@@ -107,7 +125,10 @@ <h1 id='title'>Spinners</h1>
   opacity: #{opacity},
   padding: #{padding},
   rotation: #{rotation},
-  color: '#{color}'
+  fadeOutSpeed: #{fadeOutSpeed},
+  color: '#{color}',
+  pauseColor: '#{pauseColor}',
+  pauseOpacity: #{pauseOpacity}
 }).play();
 
 spinner.center();</code></pre>
diff --git a/gui/js/gui.js b/gui/js/gui.js
index 72cf9e3..f7a1dcb 100644
--- a/gui/js/gui.js
+++ b/gui/js/gui.js
@@ -59,7 +59,7 @@ $(document).ready(function() {
     }
 
     // colors should start with #
-    if ($(this).attr('name') == 'color' && $(this).val().substr(0,1) != '#') {
+    if (($.inArray($(this).attr('name'), ['color','pauseColor']) != -1) && $(this).val().substr(0,1) != '#') {
       $(this).val('#' + $(this).val());
     }
 
@@ -80,7 +80,7 @@ $(document).ready(function() {
       
       $(this).addClass('disabled').siblings().removeClass('disabled');
     });
-  })
+  });
   
   // collect the options
   function getOptions() {
@@ -93,6 +93,7 @@ $(document).ready(function() {
 
     // add color
     options.color = $("#gui input[name='color']").val();
+    options.pauseColor = $("#gui input[name='pauseColor']").val();
     
     return options;
   }
@@ -126,7 +127,7 @@ $(document).ready(function() {
       $.each(ho.split('&'), function(i, pair) {
         var p = pair.split('='), name = p[0], value = p[1];
         options[name] = value;
-        if (name != 'color') options[name] = parseFloat(options[name]);
+        if (name != 'color' && name != 'pauseColor') options[name] = parseFloat(options[name]);
         else if (options[name].substr(0,1) != '#') options[name] = '#' + options[name];
       });
       return options;
diff --git a/js/spinners/spinners.js b/js/spinners/spinners.js
index 4825bf2..6ed4019 100644
--- a/js/spinners/spinners.js
+++ b/js/spinners/spinners.js
@@ -55,10 +55,11 @@ var _ = {
   }
 };
 
-function getOpacityArray(dashes) {
-  var step  = 1 / dashes, array = [];
-  for (var i = 0;i<dashes;i++)
-    array.push((i + 1) * step);
+function getOpacityArray(dashes, fadeOutSpeed) {
+  var step = 1 / dashes, array = [];
+  for (var i = 0; i<dashes;i++) {
+    array.push((i + fadeOutSpeed) * step);
+  }
   return array;
 }
 
@@ -378,6 +379,9 @@ function Spinner(element) {
     width: 1.8,
     opacity: 1,
     padding: 3,
+    fadeOutSpeed: 0,
+    pauseColor: '#000',
+    pauseOpacity: 0.3,
     rotation: 700
   }, arguments[1] || {}));
 
@@ -385,6 +389,7 @@ function Spinner(element) {
 
   All.add(this);
 }
+
 $.extend(Spinner.prototype, {
   setOptions: function(options) {
     this.options = $.extend({}, this.options, options || {});
@@ -427,6 +432,7 @@ $.extend(Spinner.prototype, {
     }
 
     if (this._centered) this.center();
+    if (this._state == "paused") this._renderPause();
   },
 
   remove: function() {
@@ -465,7 +471,6 @@ $.extend(Spinner.prototype, {
     return this;
   },
 
-
   /*
    * Draw
    */
@@ -514,7 +519,6 @@ $.extend(Spinner.prototype, {
     this.drawPosition(this._position);
   },
 
-
   /*
    * Controls
    */
@@ -530,9 +534,10 @@ $.extend(Spinner.prototype, {
 
   pause: function() {
     if (this._state == 'paused') return;
-
     this._pause();
 
+    if (this._layout !== null) this._renderPause();
+
     this._state = 'paused';
     return this;
   },
@@ -585,7 +590,7 @@ $.extend(Spinner.prototype, {
     var layout = {
       workspace: {
         radius: radius,
-        opacities: getOpacityArray(dashes)
+        opacities: getOpacityArray(dashes, this.options.fadeOutSpeed)
       },
       dash: {
         position: {
@@ -624,6 +629,19 @@ $.extend(Spinner.prototype, {
     });
 
     this._centered = true;
+  },
+
+  _renderPause: function() {
+    var radius    = this.getLayout().workspace.radius,
+        dashes    = this.options.dashes,
+        rotation  = radian(360 / dashes);
+
+    this.ctx.clearRect(radius * -1, radius * -1, radius * 2, radius * 2);
+
+    for (var i = 0, len = dashes; i < len; i++) {
+      this.drawDash(this.options.pauseOpacity, this.options.pauseColor);
+      this.ctx.rotate(rotation);
+    }
   }
 });