diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss
index 1b2fdfb..e29b7c0 100644
--- a/src/scss/cdb-components/loader.scss
+++ b/src/scss/cdb-components/loader.scss
@@ -17,28 +17,26 @@ This is the generic loader for widgets, maps, components, ...
 @import '../cdb-variables/sizes';
 
 .CDB-Loader {
-  @include css3-prefix(animation, loader-progress 1000ms linear 1);
-  @include opacity(0);
-  @include transition(opacity, 1000ms);
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 2px;
-  background: rgba($cBlue, 1);
+  width: 50%;
+  height: 3px;
+  transform: translateX(-200%);
+  background-image: linear-gradient(90deg, rgba($cBlue, 1) 0%, #32BBFE 90%, #FAFEFF 95%);
   z-index: 2;
 }
+
 .CDB-Loader.is-visible {
-  @include css3-prefix(animation, loader-progress 2000ms linear infinite);
-  @include opacity(1);
+  @include css3-prefix(animation, loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite);
 }
 
 @include keyframes(loader-progress) {
-  0% {
-    width: 0;
+  from {
+    transform: translateX(-200%);
   }
-  100% {
-    width: 100%;
+  to {
+    transform: translateX(200%);
   }
 }