diff --git a/.dependabot/config.yml b/.dependabot/config.yml
new file mode 100644
index 0000000..d2c748d
--- /dev/null
+++ b/.dependabot/config.yml
@@ -0,0 +1,6 @@
+version: 1
+update_configs:
+  - package_manager: "javascript"
+    directory: "/"
+    update_schedule: "live"
+    target_branch: "develop"
diff --git a/scss/styles/_skeleton-loader.scss b/scss/styles/_skeleton-loader.scss
index 6170468..6f09a02 100644
--- a/scss/styles/_skeleton-loader.scss
+++ b/scss/styles/_skeleton-loader.scss
@@ -1,7 +1,19 @@
-$skeleton-loader-mask-color: $white;
-$skeleton-loader-mask: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='332'%3E%3Cpath d='M0 0h768v332H0V0zm0 0h220v48H0V0zm0 64h308v96H0V64zm0 112h418v96H0v-96zM324 64h444v96H324V64zm110 112h304v96H434v-96zM0 288h188v44H0v-44zm204 0h154v44H204v-44z' fill='#{$skeleton-loader-mask-color}' fill-rule='evenodd' /%3E%3C/svg%3E"), "#", "%23"));
-$skeleton-loader-mask-fill-pixel: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 0h1v1H0z'/%3E%3C/svg%3E"), "#", "%23"));
-$skeleton-loader-mask-table: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='180'%3E%3Cpath d='M0 0h768v180H0V0zm0 10h90v24H0V10zm0 45h70v24H0V55zm0 45h80v24H0v-24zm0 45h90v24H0v-24zM114 10h100v24H114V10zm0 45h120v24H114V55zm0 45h130v24H114v-24zm0 45h110v24H114v-24zM268 10h100v24H268V10zm0 45h80v24h-80V55zm0 45h100v24H268v-24zm0 45h110v24H268v-24zM402 10h90v24h-90V10zm0 45h70v24h-70V55zm0 45h80v24h-80v-24zm0 45h90v24h-90v-24zM516 10h90v24h-90V10zm0 45h110v24H516V55zm0 45h120v24H516v-24zm0 45h100v24H516v-24zm144 0h84v24h-84v-24zm0-45h74v24h-74v-24zm0-45h64v24h-64V55zm0-45h84v24h-84V10zM0 44h768v1H0v-1zm0 45h768v1H0v-1zm0 45h768v1H0v-1zm0 45h768v1H0v-1z' fill='#{$skeleton-loader-mask-color}' fill-rule='evenodd' /%3E%3C/svg%3E"), "#", "%23"));
+$skeleton-loader-mask-color: $white !default;
+$skeleton-loader-mask-color-dark: $dark !default;
+$skeleton-loader-mask-color-light: $light !default;
+$skeleton-loader-mask: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='332'%3E%3Cpath d='M0 0h768v332H0V0zm0 0h220v48H0V0zm0 64h308v96H0V64zm0 112h418v96H0v-96zM324 64h444v96H324V64zm110 112h304v96H434v-96zM0 288h188v44H0v-44zm204 0h154v44H204v-44z' fill='#{$skeleton-loader-mask-color}' fill-rule='evenodd' /%3E%3C/svg%3E"), "#", "%23")) !default;
+$skeleton-loader-mask-dark: str-replace($skeleton-loader-mask, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-dark + '\''}, "#", "%23")) !default;
+$skeleton-loader-mask-light: str-replace($skeleton-loader-mask, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-light + '\''}, "#", "%23")) !default;
+$skeleton-loader-mask-fill-pixel: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 0h1v1H0z'/%3E%3C/svg%3E"), "#", "%23")) !default;
+$skeleton-loader-mask-fill-pixel-dark: str-replace($skeleton-loader-mask-fill-pixel, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-dark + '\''}, "#", "%23")) !default;
+$skeleton-loader-mask-fill-pixel-light: str-replace($skeleton-loader-mask-fill-pixel, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-light + '\''}, "#", "%23")) !default;
+$skeleton-loader-mask-table: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='180'%3E%3Cpath d='M0 0h768v180H0V0zm0 10h90v24H0V10zm0 45h70v24H0V55zm0 45h80v24H0v-24zm0 45h90v24H0v-24zM114 10h100v24H114V10zm0 45h120v24H114V55zm0 45h130v24H114v-24zm0 45h110v24H114v-24zM268 10h100v24H268V10zm0 45h80v24h-80V55zm0 45h100v24H268v-24zm0 45h110v24H268v-24zM402 10h90v24h-90V10zm0 45h70v24h-70V55zm0 45h80v24h-80v-24zm0 45h90v24h-90v-24zM516 10h90v24h-90V10zm0 45h110v24H516V55zm0 45h120v24H516v-24zm0 45h100v24H516v-24zm144 0h84v24h-84v-24zm0-45h74v24h-74v-24zm0-45h64v24h-64V55zm0-45h84v24h-84V10zM0 44h768v1H0v-1zm0 45h768v1H0v-1zm0 45h768v1H0v-1zm0 45h768v1H0v-1z' fill='#{$skeleton-loader-mask-color}' fill-rule='evenodd' /%3E%3C/svg%3E"), "#", "%23")) !default;
+$skeleton-loader-mask-table-dark: str-replace($skeleton-loader-mask-table, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-dark + '\''}, "#", "%23")) !default;
+$skeleton-loader-mask-table-light: str-replace($skeleton-loader-mask-table, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-light + '\''}, "#", "%23")) !default;
+$skeleton-loader-mask-list: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='40'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 24h1v16H0z'/%3E%3C/svg%3E"), "#", "%23")) !default;
+$skeleton-loader-mask-list-dark: str-replace($skeleton-loader-mask-list, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-dark + '\''}, "#", "%23")) !default;
+$skeleton-loader-mask-list-light: str-replace($skeleton-loader-mask-list, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-light + '\''}, "#", "%23")) !default;
+
 .skeleton-loader {
   position: relative;
   overflow: hidden;
@@ -36,6 +48,15 @@ $skeleton-loader-mask-table: escape-svg(str-replace(url("data:image/svg+xml,%3Cs
     width: 100vw;
     top: 0;
   }
+  &.skeleton-loader-list {
+    max-width: 320px;
+    height: 224px;
+    &::before {
+      background-size: 1px 40px;
+      background-repeat: repeat;
+      background-image: $skeleton-loader-mask-list;
+    }
+  }
   &.skeleton-loader-table {
     max-height: 100%;
     height: 181px;
@@ -64,6 +85,62 @@ $skeleton-loader-mask-table: escape-svg(str-replace(url("data:image/svg+xml,%3Cs
       background: none;
     }
   }
+  &.bg-dark {
+    &::before {
+      background-size: 768px 332px, 100% 100%;
+      background-repeat:no-repeat;
+      background-image: $skeleton-loader-mask-dark, $skeleton-loader-mask-fill-pixel-dark;
+      background-position-x: 0, 768px;
+    }
+    &::after {
+      background: linear-gradient(80deg, lighten($dark, 5%) 10%, lighten($dark, 10%) 80%, transparent 90%), lighten($dark, 5%);
+      background-size: 50% 100%;
+      background-repeat: no-repeat;
+    }
+    &.skeleton-loader-list {
+      &::before {
+        background-size: 1px 40px;
+        background-repeat: repeat;
+        background-image: $skeleton-loader-mask-list-dark;
+      }
+    }
+    &.skeleton-loader-table {
+      &::before {
+        background-size: 768px 180px;
+        background-position-y: 1px;
+        background-repeat: repeat;
+        background-image: $skeleton-loader-mask-table-dark;
+      }
+    }
+  }
+  &.bg-light {
+    &::before {
+      background-size: 768px 332px, 100% 100%;
+      background-repeat:no-repeat;
+      background-image: $skeleton-loader-mask-light, $skeleton-loader-mask-fill-pixel-light;
+      background-position-x: 0, 768px;
+    }
+    &::after {
+      background: linear-gradient(80deg, darken($light, 5%) 10%, darken($light, 10%) 80%, transparent 90%), darken($light, 5%);
+      background-size: 50% 100%;
+      background-repeat: no-repeat;
+    }
+    &.skeleton-loader-list {
+      &::before {
+        background-size: 1px 40px;
+        background-repeat: repeat;
+        background-image: $skeleton-loader-mask-list-light;
+      }
+    }
+    &.skeleton-loader-table {
+      &::before {
+        background-size: 768px 180px;
+        background-position-y: 1px;
+        background-repeat: repeat;
+        background-image: $skeleton-loader-mask-table-light;
+      }
+    }
+  }
 }
 @include media-breakpoint-up(sm) {
   .skeleton-loader {
diff --git a/scss/styles/_spinners.scss b/scss/styles/_spinners.scss
index e98ac8f..8b7f047 100644
--- a/scss/styles/_spinners.scss
+++ b/scss/styles/_spinners.scss
@@ -1,7 +1,8 @@
-$spinner-sm-size: 1rem;
-$spinner-size: 2rem;
-$spinner-md-size: 4rem;
-$spinner-lg-size: 6rem;
+$spinner-xs-size: 1rem !default;
+$spinner-sm-size: 2rem !default;
+$spinner-md-size: 4rem !default;
+$spinner-lg-size: 6rem !default;
+$spinner-fill-color: inherit !default;
 
 .spinner,
 .spinner:before,
@@ -10,69 +11,71 @@ $spinner-lg-size: 6rem;
 }
 .spinner {
   color: $green;
+  background: $white;
   position: relative;
-  width: $spinner-size;
-  height: $spinner-size;
-  box-shadow: inset 0 0 0 3.5px;
+  width: $spinner-md-size;
+  height: $spinner-md-size;
+  box-shadow: inset 0 0 0 5px;
   transform: translateZ(0);
   animation: rotate-circle 1s infinite linear;
   &:after {
-    width: $spinner-size/2 + 0.2rem; //5.2em;
-    height: $spinner-size + 0.2rem; // 10.2em;
-    background: $white;
-    border-radius: 0 $spinner-size + 0.2rem $spinner-size + 0.2rem 0;//0 10.2em 10.2em 0;
-    top: -0.1rem;
-    left: $spinner-size/2 + 0.1rem;//5.1em;
-    transform-origin: 0 $spinner-size/2 + 0.1rem;//0 5.1em;
+    width: $spinner-md-size/2; //5.2em;
+    height: $spinner-md-size; // 10.2em;
+    background: $spinner-fill-color;
+    border-radius: 0 $spinner-md-size $spinner-md-size 0;//0 10.2em 10.2em 0;
+    //top: -0.1rem;
+    left: $spinner-md-size/2;//5.1em;
+    transform-origin: 0 $spinner-md-size/2;//0 5.1em;
     animation: rotate-circle 2s infinite ease;
   }
   &:before {
-    width: $spinner-size/2 + 0.2rem; //5.2em;
-    height: $spinner-size + 0.2rem; //10.2em;
-    background: $white;
-    border-radius: $spinner-size + 0.2rem 0 0 $spinner-size + 0.2rem; // 10.2em 0 0 10.2em;
-    top: -0.1rem;
-    left: -0.1rem;
-    transform-origin: $spinner-size/2 + 0.2rem $spinner-size/2 + 0.1rem; // 5.2em 5.1em;
+    width: $spinner-md-size/2; //5.2em;
+    height: $spinner-md-size; //10.2em;
+    background: $spinner-fill-color;
+    border-radius: $spinner-md-size 0 0 $spinner-md-size; // 10.2em 0 0 10.2em;
+    //top: -0.1rem;
+    //left: -0.1rem;
+    left: 0;
+    transform-origin: $spinner-md-size/2 $spinner-md-size/2; // 5.2em 5.1em;
     animation: rotate-circle 2s infinite ease 1.5s;
   }
 }
 
-.spinner.spinner-sm, .btn .spinner {
-  width: $spinner-sm-size;
-  height: $spinner-sm-size;
+.spinner.spinner-xs, .btn .spinner {
+  width: $spinner-xs-size;
+  height: $spinner-xs-size;
   box-shadow: inset 0 0 0 2px;
   &:before {
-    width: $spinner-sm-size/2 + 0.2rem;
-    height: $spinner-sm-size + 0.2rem;
-    border-radius: $spinner-sm-size + 0.2rem 0 0 $spinner-sm-size + 0.2rem;
-    transform-origin: $spinner-sm-size/2 + 0.2rem $spinner-sm-size/2 + 0.1rem;
+    width: $spinner-xs-size/2;
+    height: $spinner-xs-size;
+    border-radius: $spinner-xs-size 0 0 $spinner-xs-size;
+    transform-origin: $spinner-xs-size/2 $spinner-xs-size/2;
   }
   &:after {
-    width: $spinner-sm-size/2 + 0.2rem; //5.2em;
-    height: $spinner-sm-size + 0.2rem; // 10.2em;
-    border-radius: 0 $spinner-sm-size + 0.2rem $spinner-sm-size + 0.2rem 0;//0 10.2em 10.2em 0;
-    left: $spinner-sm-size/2 + 0.1rem;//5.1em;
-    transform-origin: 0 $spinner-sm-size/2 + 0.1rem;//0 5.1em;
+    width: $spinner-xs-size/2; //5.2em;
+    height: $spinner-xs-size; // 10.2em;
+    border-radius: 0 $spinner-xs-size $spinner-xs-size 0;//0 10.2em 10.2em 0;
+    left: $spinner-xs-size/2;//5.1em;
+    transform-origin: 0 $spinner-xs-size/2;//0 5.1em;
   }
 }
 
-.spinner.spinner-md {
-  width: $spinner-md-size;
-  height: $spinner-md-size;
-  box-shadow: inset 0 0 0 5px;
+.spinner.spinner-sm {
+  width: $spinner-sm-size;
+  height: $spinner-sm-size;
+  box-shadow: inset 0 0 0 3.5px;
   &:before {
-    width: $spinner-md-size/2 + 0.2rem;
-    height: $spinner-md-size + 0.2rem;
-    border-radius: $spinner-md-size + 0.2rem 0 0 $spinner-md-size + 0.2rem;
-    transform-origin: $spinner-md-size/2 + 0.2rem $spinner-md-size/2 + 0.1rem;
+    width: $spinner-sm-size/2;
+    height: $spinner-sm-size;
+    border-radius: $spinner-sm-size 0 0 $spinner-sm-size;
+    transform-origin: $spinner-sm-size/2 $spinner-sm-size/2;
   }
   &:after {
-    width: $spinner-md-size/2 + 0.2rem; //5.2em;
-    height: $spinner-md-size + 0.2rem; // 10.2em;
-    border-radius: 0 $spinner-md-size + 0.2rem $spinner-md-size + 0.2rem 0;//0 10.2em 10.2em 0;
-    left: $spinner-md-size/2 + 0.1rem;//5.1em;
-    transform-origin: 0 $spinner-md-size/2 + 0.1rem;//0 5.1em;
+    width: $spinner-sm-size/2; //5.2em;
+    height: $spinner-sm-size; // 10.2em;
+    border-radius: 0 $spinner-sm-size $spinner-sm-size 0;//0 10.2em 10.2em 0;
+    left: $spinner-sm-size/2;//5.1em;
+    transform-origin: 0 $spinner-sm-size/2;//0 5.1em;
   }
 }
 
@@ -81,43 +84,49 @@ $spinner-lg-size: 6rem;
   height: $spinner-lg-size;
   box-shadow: inset 0 0 0 7px;
   &:before {
-    width: $spinner-lg-size/2 + 0.2rem;
-    height: $spinner-lg-size + 0.2rem;
-    border-radius: $spinner-lg-size + 0.2rem 0 0 $spinner-lg-size + 0.2rem;
-    transform-origin: $spinner-lg-size/2 + 0.2rem $spinner-lg-size/2 + 0.1rem;
+    width: $spinner-lg-size/2;
+    height: $spinner-lg-size;
+    border-radius: $spinner-lg-size 0 0 $spinner-lg-size;
+    transform-origin: $spinner-lg-size/2  $spinner-lg-size/2;
   }
   &:after {
-    width: $spinner-lg-size/2 + 0.2rem; //5.2em;
-    height: $spinner-lg-size + 0.2rem; // 10.2em;
-    border-radius: 0 $spinner-lg-size + 0.2rem $spinner-lg-size + 0.2rem 0;//0 10.2em 10.2em 0;
-    left: $spinner-lg-size/2 + 0.1rem;//5.1em;
-    transform-origin: 0 $spinner-lg-size/2 + 0.1rem;//0 5.1em;
+    width: $spinner-lg-size/2; //5.2em;
+    height: $spinner-lg-size; // 10.2em;
+    border-radius: 0 $spinner-lg-size $spinner-lg-size 0;//0 10.2em 10.2em 0;
+    left: $spinner-lg-size/2;//5.1em;
+    transform-origin: 0 $spinner-lg-size/2;//0 5.1em;
   }
 }
-
-.spinner:before,
-.spinner:after {
+.spinner {
+  @each $color, $value in $theme-colors {
+    &.bg-#{$color} {
+      &::before, &::after {
+        box-shadow: $value 0 0 0 1px;
+      }
+    }
+  }
+}
+.spinner::before,
+.spinner::after {
   position: absolute;
   content: '';
+  box-shadow: $white 0 0 0 1px;
 }
 
 .spinner.light {
-  &:before,
-  &:after {
-    background: $light;
-  }
+  background: $light
 }
 
 .btn {
   .spinner {
+    background: $btn-disabled-color;
     //width: 1rem;
     //height: 1rem;
     color: $white;
     display: inline-block;
     vertical-align: -3px;
-    &:before,
-    &:after {
-      background: $btn-disabled-color;
+    &::before, &::after {
+      box-shadow: $btn-disabled-color 0 0 0 1px;
     }
   }
   &[class*=" btn-outline-"] {
@@ -126,9 +135,9 @@ $spinner-lg-size: 6rem;
     }
     .spinner {
       color: $btn-disabled-color;
-      &:before,
-      &:after {
-        background: $gray-100;
+      background: $white;
+      &::before, &::after {
+        box-shadow: $white 0 0 0 1px;
       }
     }
   }
@@ -138,9 +147,9 @@ $spinner-lg-size: 6rem;
     }
     .spinner {
       color: $btn-disabled-color;
-      &:before,
-      &:after {
-        background: $white;
+      background: $white;
+      &::before, &::after {
+        box-shadow: $white 0 0 0 1px;
       }
     }
   }
@@ -156,14 +165,14 @@ $spinner-lg-size: 6rem;
 }
 
 .spinner-sq {
-  width: $spinner-size;
-  height: $spinner-size;
+  width: $spinner-md-size;
+  height: $spinner-md-size;
   background-color: $green;
   -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
   animation: sk-rotateplane 1.2s infinite ease-in-out;
 }
 
-.spinner-sq.spinner-sm,.btn > .spinner-sq {
+.spinner-sq.spinner-xs,.btn > .spinner-sq {
   width: 1rem;
   height: 1rem;
 }
diff --git a/src/example/components/skeleton-loader/skeleton-loader.component.html b/src/example/components/skeleton-loader/skeleton-loader.component.html
index 414f712..01b9d81 100644
--- a/src/example/components/skeleton-loader/skeleton-loader.component.html
+++ b/src/example/components/skeleton-loader/skeleton-loader.component.html
@@ -7,6 +7,7 @@ <h4 class="card-header">When and how to use them?</h4>
     <h5>We currently have templates for the following:</h5>
     <ul class="list-group list-group-bullet">
       <li class="list-group-item">Content (default)</li>
+      <li class="list-group-item">List group</li>
       <li class="list-group-item">Single field</li>
       <li class="list-group-item">Table</li>
     </ul>
@@ -22,6 +23,14 @@ <h4 class="card-header">Skeleton for content (default)</h4>
     <exemplify [selector]="'#skeletonLoader .skeleton-loader'"></exemplify>
   </div>
 </div>
+<div class="card mb-4 mx-n3 mx-md-0">
+  <h4 class="card-header">Skeleton for list content</h4>
+  <div class="card-body" id="skeletonLoaderList">
+    <p>The skeleton loader for list content will use the full width of its container, however the mask will never be wider than 320px.</p>
+    <div class="skeleton-loader skeleton-loader-list"></div>
+    <exemplify [selector]="'#skeletonLoaderList .skeleton-loader'"></exemplify>
+  </div>
+</div>
 <div class="card mb-4 mx-n3 mx-md-0">
   <h4 class="card-header">Skeleton fill</h4>
   <div class="card-body">
@@ -106,6 +115,23 @@ <h5 class="mt-4">With delay</h5>
     <exemplify [selector]="'#delayExample > .row'"></exemplify>
   </div>
 </div>
+<div class="card mb-4 mx-n3 mx-md-0" id="bgExample">
+  <h4 class="card-header">Custom fill background</h4>
+  <div class="card-body">
+    By default the skeleton loader uses white as fill color (for use against white backgrounds) but it's also possible to use skeleton loaders against dark (<code>.bg-dark</code>) and light (<code>.bg-light</code>). All skeleton loaders support custom fill colors.
+  </div>
+  <div class="card-body bg-dark text-white">
+    <h5 class="text-white pt-3">With dark background</h5>
+    <p>Just add <code>bg-dark</code> to the skeleton loader element.</p>
+    <div class="skeleton-loader bg-dark"></div>
+  </div>
+  <div class="card-body bg-light">
+    <h5>With light background</h5>
+    <p>Just add <code>bg-light</code> to the skeleton loader element.</p>
+    <div class="skeleton-loader bg-light"></div>
+    <exemplify [selector]="'#bgExample .skeleton-loader'"></exemplify>
+  </div>
+</div>
 <div class="card mb-4 mx-n3 mx-md-0">
   <h4 class="card-header">More examples</h4>
   <div class="card-body" id="tableExample">
@@ -207,39 +233,39 @@ <h5>Form with fields and button</h5>
 <h3 class="mb-3">Example with cards</h3>
 <div class="row mt-3 mt-xl-4">
     <div class="col-12 col-sm">
-        <div class="card mx-n3 mx-md-0">
+        <div class="card mx-n3 mr-sm-n2 mx-md-0">
             <div class="card-body">
                 <div class="skeleton-loader"></div>
             </div>
         </div>
     </div>
     <div class="col-12 col-sm mt-3 mt-sm-0">
-        <div class="card mx-n3 mx-md-0">
+        <div class="card mx-n3 ml-sm-n2 mx-md-0">
             <div class="card-body">
-                <div class="skeleton-loader"></div>
+                <div class="skeleton-loader delay-3"></div>
             </div>
         </div>
     </div>
 </div>
-<div class="row mt-3 mt-xl-4">
+<div class="row mt-3 mt-md-4">
     <div class="col-12 col-sm">
-        <div class="card mx-n3 mx-md-0">
+        <div class="card mx-n3 mr-sm-n2 mx-md-0">
             <div class="card-body">
                 <div class="skeleton-loader"></div>
             </div>
         </div>
     </div>
     <div class="col-12 col-sm mt-3 mt-sm-0">
-        <div class="card mx-n3 mx-md-0">
-            <div class="card-body">
-                <div class="skeleton-loader"></div>
+        <div class="card mx-n3 mx-sm-n2 mx-md-0">
+            <div class="card-body bg-light">
+                <div class="skeleton-loader bg-light delay-2"></div>
             </div>
         </div>
     </div>
     <div class="col-12 col-sm mt-3 mt-sm-0">
-        <div class="card mx-n3 mx-md-0">
-            <div class="card-body">
-                <div class="skeleton-loader"></div>
+        <div class="card mx-n3 ml-sm-n2 mx-md-0">
+            <div class="card-body bg-dark">
+                <div class="skeleton-loader bg-dark delay-3"></div>
             </div>
         </div>
     </div>
diff --git a/src/example/components/spinners/spinners.component.html b/src/example/components/spinners/spinners.component.html
index cb04470..c9c90f0 100644
--- a/src/example/components/spinners/spinners.component.html
+++ b/src/example/components/spinners/spinners.component.html
@@ -1,20 +1,20 @@
 <h2 class="my-3">Spinners</h2>
 <div class="card mx-n3 mx-md-0">
   <div class="card-body">
-    <p>Some experimental spinners</p>
+    <p>Some experimental spinners intended to be used on solid backgrounds.</p>
     <div class="row" id="loaders">
       <div class="col-auto">
-        <div class="spinner spinner-sm" role="status">
+        <div class="spinner spinner-xs" role="status">
           <span class="sr-only">Loading...</span>
         </div>
       </div>
       <div class="col-auto">
-        <div class="spinner" role="status">
+        <div class="spinner spinner-sm" role="status">
           <span class="sr-only">Loading...</span>
         </div>
       </div>
       <div class="col-auto">
-        <div class="spinner spinner-md" role="status">
+        <div class="spinner" role="status">
           <span class="sr-only">Loading...</span>
         </div>
       </div>
@@ -24,7 +24,7 @@ <h2 class="my-3">Spinners</h2>
         </div>
       </div>
       <!--<div class="col-auto">
-        <div class="spinner-sq spinner-sm" role="status">
+        <div class="spinner-sq spinner-xs" role="status">
           <span class="sr-only">Loading...</span>
         </div>
       </div>
@@ -92,32 +92,121 @@ <h2 class="my-3">Spinners</h2>
     <exemplify [selector]="'#loadersButton .btn'"></exemplify>
   </div>
 </div>
-<h3 class="my-3">Spinners on light grey background</h3>
+<h3 class="my-3">Spinners on other backgrounds</h3>
 <div class="card mx-n3 mx-md-0">
-  <div class="card-body bg-light">
-    <p>Add class <code>light</code> to spinner element when placed against light background.</p>
-    <div class="row" id="loadersLight">
-      <div class="col-auto">
-        <div class="spinner spinner-sm light" role="status">
-          <span class="sr-only">Loading...</span>
+  <div class="card-body"  id="loaderBackgrounds">
+    <p>Add class <code>bg-light</code> to spinner element when placed against light background.</p>
+    <div class="bg-light p-3">
+      <h5 class="mb-3">Light background <code>.bg-light</code></h5>
+      <div class="row">
+        <div class="col-auto">
+          <div class="spinner spinner-xs bg-light" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="spinner spinner-sm bg-light" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="spinner bg-light" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="spinner spinner-lg bg-light" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
         </div>
       </div>
-      <div class="col-auto">
-        <div class="spinner spinner-lg light" role="status">
-          <span class="sr-only">Loading...</span>
+    </div>
+    <div class="bg-dark p-3">
+      <h5 class="text-white mb-3">Light background <code>.bg-dark</code></h5>
+      <div class="row">
+        <div class="col-auto">
+          <div class="spinner spinner-xs bg-dark" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="spinner spinner-sm bg-dark" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="spinner bg-dark" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="spinner spinner-lg bg-dark" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
         </div>
       </div>
-      <!--<div class="col-auto">
-        <div class="spinner-sq spinner-sm" role="status">
-          <span class="sr-only">Loading...</span>
+    </div>
+    <div class="bg-warning p-3">
+      <h5 class="mb-3">Warning background <code>.bg-warning</code></h5>
+      <div class="row">
+        <div class="col-auto">
+          <div class="spinner spinner-xs bg-warning" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="spinner spinner-sm bg-warning" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="spinner bg-warning" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="spinner spinner-lg bg-warning" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
         </div>
       </div>
-      <div class="col-auto">
-        <div class="spinner-sq spinner-lg" role="status">
-          <span class="sr-only">Loading...</span>
+    </div>
+    <div class="bg-primary p-3">
+      <h5 class="mb-3 text-white">Primary background <code>.bg-primary</code></h5>
+      <div class="row">
+        <div class="col-auto">
+          <div class="spinner spinner-xs bg-primary" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
         </div>
-      </div>-->
+        <div class="col-auto">
+          <div class="spinner spinner-sm bg-primary" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="spinner bg-primary" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+        <div class="col-auto">
+          <div class="spinner spinner-lg bg-primary" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p class="mt-3">And so on... spinners can be used on any solid background by adding a <code>bg-*</code> class either to the spinner element itself or to it's parent container. See available bg classes under the <a [routerLink]="'/colors'">colors section</a>.</p>
+    <!--<div class="col-auto">
+      <div class="spinner-sq spinner-xs" role="status">
+        <span class="sr-only">Loading...</span>
+      </div>
     </div>
-    <exemplify [selector]="'#loadersLight .col-auto > *'"></exemplify>
+    <div class="col-auto">
+      <div class="spinner-sq spinner-lg" role="status">
+        <span class="sr-only">Loading...</span>
+      </div>
+    </div>-->
+    <exemplify [selector]="'#loaderBackgrounds .spinner'"></exemplify>
   </div>
 </div>
diff --git a/svg/list-mask.svg b/svg/list-mask.svg
new file mode 100644
index 0000000..acf1d8f
--- /dev/null
+++ b/svg/list-mask.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1" height="40" viewBox="0 0 1 40">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="list-mask">
+    <rect id="content" class="cls-1" y="24" width="1" height="16"/>
+  </g>
+</svg>
diff --git a/svg/mask-template.psd b/svg/mask-template.psd
index 6967c4b..10452e8 100644
Binary files a/svg/mask-template.psd and b/svg/mask-template.psd differ