diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss
index c7136c3..3184375 100644
--- a/src/scss/cdb-components/buttons.scss
+++ b/src/scss/cdb-components/buttons.scss
@@ -9,8 +9,13 @@ Layout Component:
 
 ```
 
-<button class="CDB-Button CDB-Button--primary CDB-Button--big">
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--big">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
 <button class="CDB-Button CDB-Button--primary CDB-Button--big is-disabled">
@@ -18,16 +23,26 @@ Layout Component:
 </button>
 
 
-<button class="CDB-Button CDB-Button--primary">
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
 <button class="CDB-Button CDB-Button--primary is-disabled">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
 </button>
 
-<button class="CDB-Button CDB-Button--primary CDB-Button--small">
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--small">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
 <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
@@ -151,12 +166,14 @@ Layout Component:
 
 .CDB-Button {
   @include transition(background, 300ms);
-  padding: $baseSize + 1 $baseSize + 12;
+  position: relative;
+  padding: $baseSize $baseSize + 12;
   border: 1px solid transparent;
   border-radius: $baseSize / 2;
   cursor: pointer;
   box-sizing: border-box;
 
+
   .CDB-Button-Text {
     display: block;
   }
@@ -166,12 +183,53 @@ Layout Component:
   }
 }
 
+.CDB-Button--loading {
+
+  .CDB-Button-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transform-origin: 50%;
+    opacity: 0;
+    z-index: 10;
+  }
+  .CDB-Button-Text {
+    @include transition(all 600ms);
+  }
+  &.is-loading {
+    cursor: default;
+
+    .CDB-Button-loader {
+      animation-name: showIn;
+      animation-duration: 600ms;
+      animation-fill-mode: forwards;
+    }
+    .CDB-Button-Text {
+      opacity: 0;
+    }
+  }
+}
+
+@keyframes showIn {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+
 .CDB-Button--small {
   padding: $baseSize / 2 $baseSize + 4;
+  border-radius: 3px;
 }
 
 .CDB-Button--big {
-  padding: $baseSize + 4 $baseSize + 12;
+  padding: $baseSize + 3 $baseSize + 12;
 }
 
 .CDB-Button--icon {
@@ -189,6 +247,15 @@ Layout Component:
     background: darken($cBlue, 16%);
   }
 
+  &.is-loading {
+    &:hover {
+      background: $cBlue;
+    }
+    &:active {
+      background: $cBlue;
+    }
+  }
+
   &.is-disabled {
     &:hover {
       background: $cBlue;
@@ -252,24 +319,44 @@ Layout Component:
 # Buttons/Secondary
 
 ```
-<button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
+
 <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
-<button class="CDB-Button CDB-Button--secondary">
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--secondary">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
+
 <button class="CDB-Button CDB-Button--secondary is-disabled">
   <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
 </button>
 
-<button class="CDB-Button CDB-Button--secondary CDB-Button--small">
-  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+
+<button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--small">
+  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-blue">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
 </button>
 
 <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
@@ -281,8 +368,13 @@ Layout Component:
 <br/>
 
 <div style="background: #2E3C43; padding: 20px;">
-  <button class="CDB-Button CDB-Button--secondary CDB-Button--big">
+  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--big">
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+    <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
+      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+      </svg>
+    </div>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--big is-disabled">
@@ -293,8 +385,13 @@ Layout Component:
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
   </button>
 
-  <button class="CDB-Button CDB-Button--secondary CDB-Button--white">
+  <button class="CDB-Button CDB-Button--loading CDB-Button--secondary CDB-Button--white">
     <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
+    <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+      </svg>
+    </div>
   </button>
 
   <button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled">
@@ -338,6 +435,20 @@ Layout Component:
       background: transparent;
     }
   }
+
+  &.is-loading {
+    cursor: default;
+
+    &:hover {
+      background: none;
+      color: $cBlue;
+    }
+    &:active {
+      background: none;
+      color: $cBlue;
+    }
+  }
+
 }
 
 
@@ -363,4 +474,18 @@ Layout Component:
       color: $cWhite;
     }
   }
+
+  &.is-loading {
+    cursor: default;
+
+    &:hover {
+      background: none;
+      color: $cWhite;
+    }
+    &:active {
+      background: none;
+      color: $cWhite;
+    }
+  }
+
 }
diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss
index 394a701..b15e06b 100644
--- a/src/scss/cdb-variables/_colors.scss
+++ b/src/scss/cdb-variables/_colors.scss
@@ -15,7 +15,7 @@ $cThirdBackground: #F9F9F9;
 //Lines
 $cHoverLine: #AAA;
 $cMainLine: #DDD;
-$cSecondaryLine: #EEE;
+$cSecondaryLine: rgba($cMainBg, 0.08);
 
 //Typography
 $cMainText: #2E3C43;
diff --git a/styleguide/_template.html b/styleguide/_template.html
index cbb6d23..ff15055 100644
--- a/styleguide/_template.html
+++ b/styleguide/_template.html
@@ -1,5 +1,8 @@
 <head>
   <link href='../css/cartostyles.css' type='text/css' rel='stylesheet'>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+
 </head>
 
 {{> theme}}
@@ -44,6 +47,11 @@
         // Show section in Styleguide
         j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
       }
+
+     $('.CDB-Button--loading').click(function(){
+        $(this).toggleClass("is-loading");
+     })
+
     });
 </script>
 
@@ -116,3 +124,6 @@
 		</div>
 	{{/each}}
 </div>
+
+
+