@syncfusion/ej2-querybuilder 31.1.17 → 31.2.2

package/styles/highcontrast-light.css

@@ -778,6 +778,42 @@
   color: #000;
 }
 
+.e-querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid #ffd739;
+  border-top: 2px solid #ffd939;
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
 .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {

package/styles/highcontrast-lite.css

@@ -804,4 +804,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #fff;
+}
+
+.e-querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid #ffd739;
+  border-top: 2px solid #ffd939;
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
 }

package/styles/highcontrast.css

@@ -806,6 +806,42 @@
   color: #fff;
 }
 
+.e-querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid #ffd739;
+  border-top: 2px solid #ffd939;
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
 .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {

package/styles/material-dark-lite.css

@@ -728,4 +728,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #f44336;
+}
+
+.e-querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid #7986cb;
+  border-top: 2px solid #3f51b5;
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
 }

package/styles/material-dark.css

@@ -730,6 +730,42 @@
   color: #f44336;
 }
 
+.e-querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid #7986cb;
+  border-top: 2px solid #3f51b5;
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
 .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {

package/styles/material-lite.css

@@ -743,4 +743,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #f44336;
+}
+
+.e-querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid #7986cb;
+  border-top: 2px solid #3f51b5;
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
 }

package/styles/material.css

@@ -745,6 +745,42 @@
   color: #f44336;
 }
 
+.e-querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid #7986cb;
+  border-top: 2px solid #3f51b5;
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
 .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {

package/styles/material3-dark-lite.css

@@ -741,4 +741,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: rgba(var(--color-sf-error));
+}
+
+.e-querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(var(--color-sf-primary-container));
+  border-top: 2px solid rgba(var(--color-sf-primary));
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
 }

package/styles/material3-dark.css

@@ -743,6 +743,42 @@
   color: rgba(var(--color-sf-error));
 }
 
+.e-querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(var(--color-sf-primary-container));
+  border-top: 2px solid rgba(var(--color-sf-primary));
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
 .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {

package/styles/material3-lite.css

@@ -743,4 +743,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: rgba(var(--color-sf-error));
+}
+
+.e-querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(var(--color-sf-primary-container));
+  border-top: 2px solid rgba(var(--color-sf-primary));
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
 }

package/styles/material3.css

@@ -745,6 +745,42 @@
   color: rgba(var(--color-sf-error));
 }
 
+.e-querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(var(--color-sf-primary-container));
+  border-top: 2px solid rgba(var(--color-sf-primary));
+  border-radius: 50%;
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: translateX(-50%) rotate(0deg);
+            transform: translateX(-50%) rotate(0deg);
+  }
+  100% {
+    -webkit-transform: translateX(-50%) rotate(360deg);
+            transform: translateX(-50%) rotate(360deg);
+  }
+}
 .e-query-builder.e-device.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger.e-query-builder.e-multi-connector .e-rule-list .e-group-container,
 .e-bigger .e-query-builder.e-multi-connector .e-rule-list .e-group-container {

package/styles/query-builder/_bds-definition.scss

@@ -112,3 +112,5 @@ $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $secondary-text-color !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_bootstrap-dark-definition.scss

@@ -110,3 +110,5 @@ $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $grey-dark-font !default;
+$spinner-border-light-color: $brand-primary-lighten-40 !default;
+$spinner-border-color: $brand-primary !default;

package/styles/query-builder/_bootstrap-definition.scss

@@ -110,3 +110,7 @@ $qrybldr-drag-grp-list-heg: 29px !default;
 $qrybldr-drag-grp-big-list-heg: 35px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $grey-light-font !default;
+$primary: $brand-primary;
+$primary-light: $brand-info;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_bootstrap4-definition.scss

@@ -112,3 +112,6 @@ $qrybldr-drag-grp-list-heg: 27px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 7px !default;
 $qryblr-drag-icon-color: $gray-700 !default;
+$primary-light: $gray-100;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_bootstrap5-definition.scss

@@ -113,3 +113,5 @@ $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $icon-color !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_bootstrap5.3-definition.scss

@@ -113,3 +113,5 @@ $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $icon-color !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_fabric-dark-definition.scss

@@ -110,3 +110,7 @@ $qrybldr-drag-grp-list-heg: 30px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $neutral-light-fontalt !default;
+$primary: $theme-primary !default;
+$primary-light: $theme-lighter !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_fabric-definition.scss

@@ -110,3 +110,7 @@ $qrybldr-drag-grp-list-heg: 30px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $neutral-light-font !default;
+$primary: $theme-primary !default;
+$primary-light: $theme-lighter !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_fluent-definition.scss

@@ -112,3 +112,5 @@ $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $secondary-text-color !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_fluent2-definition.scss

@@ -112,3 +112,5 @@ $qrybldr-drag-grp-icon-pad: 10px 10px 10px 1px !default;
 $qrybldr-drag-grp-list-heg: 31px !default;
 $qrybldr-drag-grp-big-list-heg: 36px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_fusionnew-definition.scss

@@ -113,3 +113,5 @@ $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $secondary-text-color !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_highcontrast-definition.scss

@@ -110,3 +110,7 @@ $qrybldr-drag-grp-list-heg: 32px !default;
 $qrybldr-drag-grp-big-list-heg: 37px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
 $qryblr-drag-icon-color: $content-font !default;
+$primary: #ffd939 !default;
+$primary-light: #ffd739 !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_highcontrast-light-definition.scss

@@ -110,3 +110,7 @@ $qrybldr-drag-grp-list-heg: 32px !default;
 $qrybldr-drag-grp-big-list-heg: 37px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
 $qryblr-drag-icon-color: $content-font !default;
+$primary: #ffd939 !default;
+$primary-light: #ffd739 !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_material-dark-definition.scss

@@ -111,3 +111,6 @@ $qrybldr-drag-grp-list-heg: 25px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $grey-dark-font !default;
+$primary-light: $primary-300 !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_material-definition.scss

@@ -110,3 +110,6 @@ $qrybldr-drag-grp-list-heg: 25px !default;
 $qrybldr-drag-grp-big-list-heg: 32px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: rgba($grey-black, .87) !default;
+$primary-light: $primary-300 !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_material3-definition.scss

@@ -115,3 +115,5 @@ $qrybldr-drag-grp-list-heg: 26px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 3px !default;
 $qryblr-drag-icon-color: rgba($secondary-text-color) !default;
+$spinner-border-light-color: rgba($primary-light) !default;
+$spinner-border-color: rgba($primary) !default;

package/styles/query-builder/_tailwind-definition.scss

@@ -112,3 +112,5 @@ $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 6px !default;
 $qryblr-drag-icon-color: $secondary-text-color !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_tailwind3-definition.scss

@@ -113,3 +113,5 @@ $qrybldr-drag-grp-list-heg: 28px !default;
 $qrybldr-drag-grp-big-list-heg: 34px !default;
 $qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
 $qryblr-drag-icon-color: $icon-color !default;
+$spinner-border-light-color: $primary-light !default;
+$spinner-border-color: $primary !default;

package/styles/query-builder/_theme.scss

@@ -237,3 +237,26 @@
     }
   }
 }
+
+.e-querybuilder-spinner::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid $spinner-border-light-color;
+  border-top: 2px solid $spinner-border-color;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: translateX(-50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translateX(-50%) rotate(360deg);
+  }
+}