diff --git a/css/loading-class.css b/css/loading-class.css
new file mode 100644
index 0000000..54ee4fd
--- /dev/null
+++ b/css/loading-class.css
@@ -0,0 +1,41 @@
+/**
+ * Loading
+ */
+.loading {
+  position:relative;
+}
+
+.loading:before {
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  z-index:2;
+  background-color:rgba(255, 255, 255, 0.7);
+}
+
+.loading:after {
+  --loading-size:35px;
+  content:"";
+  position:absolute;
+  top:50%;
+  left:50%;
+  z-index:3;
+  width:var(--loading-size);
+  height:var(--loading-size);
+  margin:calc(-0.5 * var(--loading-size)) 0 0 calc(-0.5 * var(--loading-size));
+  border-radius:50%;
+  border:2px dashed transparent;
+  border-bottom-color:var(--bb-color-primary);
+  border-right-color:var(--bb-color-primary);
+  animation:spinner 0.6s linear infinite;
+  box-sizing:border-box;
+}
+
+@keyframes spinner {
+  to {
+    transform:rotate(360deg);
+  }
+}
diff --git a/scss/_config.scss b/scss/_config.scss
index 5518c73..ee7c882 100644
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -43,4 +43,10 @@
 //$vertical_spacing: (
 //        "values":0 1 2 4 6 8 12 16 24 32 48 64 96 128,
 //        "md":    0 1 2 4 6 8 12 16 24 30 40 50 60 70,
-//);
\ No newline at end of file
+//);
+
+// loading class
+$loading_class: (
+        "enable": true,
+        "isWoocomerce": false // true if project using woocommerce
+)
\ No newline at end of file
diff --git a/scss/loading-class.scss b/scss/loading-class.scss
new file mode 100644
index 0000000..e337660
--- /dev/null
+++ b/scss/loading-class.scss
@@ -0,0 +1,95 @@
+/**
+ * Loading
+ */
+@import "helpers";
+
+@mixin print-loading-class($data) {
+  $isEnabled: map-get($data, 'enable');
+  $isWoocommerce: map-get($data, 'isWoocomerce');
+
+  // $isEnabled: true => loading is used
+  @if ($isEnabled) {
+    // If $isWoocommerce value is false just load the loading selector only
+    @if ($isWoocommerce == true) {
+      .loading, .woocommerce .blockUI.blockOverlay, .woocommerce .loader {
+        position: relative;
+      }
+      .woocommerce .blockUI.blockOverlay:before, .woocommerce .loader:before,
+      .loading:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+        background-color: rgba(255, 255, 255, 0.7);
+      }
+      .loading:after,
+      body .xwc--pf-loader-overlay:after,
+      .woocommerce .blockUI.blockOverlay:after,
+      .woocommerce .loader:after {
+        --loading-size: 35px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 3;
+        width: var(--loading-size);
+        height: var(--loading-size);
+        margin: calc(-0.5 * var(--loading-size)) 0 0 calc(-0.5 * var(--loading-size));
+        border-radius: 50%;
+        border: 2px dashed transparent;
+        border-bottom-color: var(--bb-color-primary);
+        border-right-color: var(--bb-color-primary);
+        animation: spinner .6s linear infinite;
+        box-sizing: border-box;
+      }
+      @keyframes spinner {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    } @else {
+      .loading {
+        position: relative;
+      }
+      .loading:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+        background-color: rgba(255, 255, 255, 0.7);
+      }
+      .loading:after {
+        --loading-size: 35px;
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 3;
+        width: var(--loading-size);
+        height: var(--loading-size);
+        margin: calc(-0.5 * var(--loading-size)) 0 0 calc(-0.5 * var(--loading-size));
+        border-radius: 50%;
+        border: 2px dashed transparent;
+        border-bottom-color: var(--bb-color-primary);
+        border-right-color: var(--bb-color-primary);
+        animation: spinner .6s linear infinite;
+        box-sizing: border-box;
+      }
+      @keyframes spinner {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    }
+  }
+}
+
+@include print-loading-class($loading_class);
+
+