2 files changed, 16 insertions, 2 deletions
diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss
index 5125b652ea..6ea204aa76 100644
--- a/openecomp-ui/resources/scss/common/_variables.scss
+++ b/openecomp-ui/resources/scss/common/_variables.scss
@@ -29,6 +29,7 @@ $tlv-gray: #f8f8f8;
 $tlv-light-gray: #eaeaea;
 $tlv-hover: #e6f6fb;
 $highlight-gray: #eceff3;
+$transparent-black: rgba(0,0,0,.3);
 
 $content-background-color: $white;
 
diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss
index d44674fb42..c38809cd07 100644
--- a/openecomp-ui/resources/scss/onboarding.scss
+++ b/openecomp-ui/resources/scss/onboarding.scss
@@ -8,7 +8,7 @@
   @import "modules";
 
   &.dox-ui-punch-out {
-    background-color: $content-background-color;    
+    background-color: $content-background-color;
     &.dox-ui-punch-out-full-page {
       position: absolute;
       top: 0;
@@ -17,7 +17,7 @@
       right: 0;
       overflow-y: auto;
     }
-  }  
+  }
 }
 
 /* Out of namespace context for datepicker */
@@ -219,3 +219,16 @@ div[data-reactroot].tooltip {
     top: 50px;
   }
 }
+
+
+.onboarding-loader {
+  .onboarding-loader-backdrop {
+    @import "common/variables";
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    background-color: $transparent-black;
+  }
+}