@syncfusion/ej2-querybuilder 31.1.17 → 31.1.22

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.1.17
-*  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
+*  version : 31.1.22
+*  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,48 +1,21 @@
 {
-  "_from": "@syncfusion/ej2-querybuilder@*",
-  "_id": "@syncfusion/ej2-querybuilder@28.2.0",
-  "_inBundle": false,
-  "_integrity": "sha512-PBHKPEPjg3OfeIikrcIOHhdJnyUDalAFU0urJJCA8LaBJpzPIOR96VuQJLp6SPE0am+1kT7Bay3oI3vQvZTkHw==",
-  "_location": "/@syncfusion/ej2-querybuilder",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "@syncfusion/ej2-querybuilder@*",
-    "name": "@syncfusion/ej2-querybuilder",
-    "escapedName": "@syncfusion%2fej2-querybuilder",
-    "scope": "@syncfusion",
-    "rawSpec": "*",
-    "saveSpec": null,
-    "fetchSpec": "*"
-  },
-  "_requiredBy": [
-    "/",
-    "/@syncfusion/ej2",
-    "/@syncfusion/ej2-angular-querybuilder",
-    "/@syncfusion/ej2-react-querybuilder",
-    "/@syncfusion/ej2-vue-querybuilder"
-  ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-development/@syncfusion/ej2-querybuilder/-/ej2-querybuilder-28.2.0.tgz",
-  "_shasum": "3d716539f3222a2319ff8b7322ad6ba394823c02",
-  "_spec": "@syncfusion/ej2-querybuilder@*",
-  "_where": "D:\\SF3992\\WFH\\Nexus\\release",
-  "author": {
-    "name": "Syncfusion Inc."
-  },
-  "bundleDependencies": false,
+  "name": "@syncfusion/ej2-querybuilder",
+  "version": "31.1.22",
+  "description": "Essential JS 2 QueryBuilder",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-querybuilder.umd.min.js",
+  "module": "./index.js",
+  "es2015": "./dist/es6/ej2-querybuilder.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.1.17",
-    "@syncfusion/ej2-buttons": "~31.1.17",
-    "@syncfusion/ej2-calendars": "~31.1.17",
-    "@syncfusion/ej2-dropdowns": "~31.1.17",
-    "@syncfusion/ej2-inputs": "~31.1.17",
+    "@syncfusion/ej2-base": "~31.1.22",
+    "@syncfusion/ej2-buttons": "~31.1.21",
+    "@syncfusion/ej2-calendars": "~31.1.22",
+    "@syncfusion/ej2-dropdowns": "~31.1.22",
+    "@syncfusion/ej2-inputs": "~31.1.22",
     "@syncfusion/ej2-splitbuttons": "~31.1.17"
   },
-  "deprecated": false,
-  "description": "Essential JS 2 QueryBuilder",
   "devDependencies": {},
-  "es2015": "./dist/es6/ej2-querybuilder.es5.js",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -57,16 +30,11 @@
     "typescript query builder",
     "syncfusion query builder"
   ],
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-querybuilder.umd.min.js",
-  "module": "./index.js",
-  "name": "@syncfusion/ej2-querybuilder",
   "repository": {
     "type": "git",
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/querybuilder"
   },
   "typings": "index.d.ts",
-  "version": "31.1.17",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/query-builder/query-builder.js

@@ -3072,26 +3072,45 @@ var QueryBuilder = /** @class */ (function (_super) {
         var ddlObj = this.fieldMode === 'DropdownTree' ? getComponent(filterElem, 'dropdowntree')
             : getComponent(container.querySelector('.e-rule-filter .e-filter-input'), 'dropdownlist');
         var column = this.fieldMode === 'DropdownTree' ? this.getColumn(ddlObj.value[0]) : this.getColumn(ddlObj.value);
+        if (target && target.nextElementSibling) {
+            target.nextElementSibling.style.position = 'relative';
+            target.nextElementSibling.classList.add('e-querybuilder-spinner');
+        }
+        var onComplete = function () {
+            if (target && target.nextElementSibling && target.nextElementSibling.classList.contains('e-querybuilder-spinner')) {
+                target.nextElementSibling.classList.remove('e-querybuilder-spinner');
+            }
+        };
         if (typeof itemData.template === 'string' || itemData.template.write === undefined) {
             var args = {
                 rule: rule, ruleID: container.id, operator: tempRule.operator, field: column.field,
                 requestType: 'value-template-create'
             };
             this.trigger('actionBegin', args);
+            onComplete();
         }
         else {
             var template = itemData.template;
+            var templateArgs = {
+                elements: tempElements.length > 1 ? tempElements : tempElements[0],
+                values: rule.value,
+                operator: tempRule.operator,
+                field: column.field,
+                dataSource: column.values,
+                onComplete: onComplete
+            };
+            var writeResult = void 0;
             if (typeof template.write === 'string') {
-                getValue(template.write, window)({
-                    elements: tempElements.length > 1 ? tempElements : tempElements[0], values: rule.value,
-                    operator: tempRule.operator, field: column.field, dataSource: column.values
-                });
+                writeResult = getValue(template.write, window)(templateArgs);
             }
             else if (typeof itemData.template !== 'function') {
-                itemData.template.write({
-                    elements: tempElements.length > 1 ? tempElements : tempElements[0],
-                    values: rule.value, operator: tempRule.operator, field: column.field, dataSource: column.values
-                });
+                writeResult = itemData.template.write(templateArgs);
+            }
+            if (writeResult && typeof writeResult.then === 'function') {
+                writeResult.then(function () { return onComplete(); });
+            }
+            else {
+                setTimeout(function () { return onComplete(); }, 100);
             }
         }
     };
@@ -7448,7 +7467,8 @@ var QueryBuilder = /** @class */ (function (_super) {
             deleteElem: groupElem.querySelectorAll('.e-rule-delete'),
             lockElem: groupElem.querySelectorAll('.e-lock-rule'),
             cloneElem: groupElem.querySelectorAll('.e-clone-rule'),
-            ruleElem: groupElem.querySelectorAll('.e-rule-container')
+            ruleElem: groupElem.querySelectorAll('.e-rule-container'),
+            ddTree: groupElem.querySelectorAll('.e-control.e-dropdowntree')
         };
         elements.deleteElem.forEach(function (elem, i) {
             if (isDisabled) {
@@ -7485,6 +7505,7 @@ var QueryBuilder = /** @class */ (function (_super) {
         disableComponents(elements.checkbox, function (elem) { return getComponent(elem, 'checkbox'); }, isDisabled);
         disableComponents(elements.radio, function (elem) { return getComponent(elem, 'radio'); }, isDisabled);
         disableComponents(elements.multiSelect, function (elem) { return getComponent(elem, 'multiselect'); }, isDisabled);
+        disableComponents(elements.ddTree, function (elem) { return getComponent(elem, 'dropdowntree'); }, isDisabled);
     };
     __decorate([
         Event()

package/styles/bds-lite.css

@@ -834,4 +834,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #d92c20;
+}
+
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-sf-utility-primary-light);
+  border-top: 2px solid var(--color-sf-brand-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/bds.css

@@ -836,6 +836,42 @@
   color: #d92c20;
 }
 
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-sf-utility-primary-light);
+  border-top: 2px solid var(--color-sf-brand-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/bootstrap-dark-lite.css

@@ -731,4 +731,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #f44336;
+}
+
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgb(189, 219.8, 255);
+  border-top: 2px solid #0070f0;
+  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/bootstrap-dark.css

@@ -733,6 +733,42 @@
   color: #f44336;
 }
 
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgb(189, 219.8, 255);
+  border-top: 2px solid #0070f0;
+  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/bootstrap-lite.css

@@ -716,4 +716,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #f44336;
+}
+
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid #5bc0de;
+  border-top: 2px solid #317ab9;
+  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/bootstrap.css

@@ -718,6 +718,42 @@
   color: #f44336;
 }
 
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid #5bc0de;
+  border-top: 2px solid #317ab9;
+  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/bootstrap4-lite.css

@@ -79,6 +79,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
@@ -784,4 +792,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #f44336;
+}
+
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid #f8f9fa;
+  border-top: 2px solid #007bff;
+  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/bootstrap4.css

@@ -79,6 +79,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
@@ -786,6 +794,42 @@
   color: #f44336;
 }
 
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid #f8f9fa;
+  border-top: 2px solid #007bff;
+  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/bootstrap5-dark-lite.css

@@ -771,4 +771,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #dc3545;
+}
+
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgb(134, 182.5, 254);
+  border-top: 2px solid #0d6efd;
+  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/bootstrap5-dark.css

@@ -773,6 +773,42 @@
   color: #dc3545;
 }
 
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgb(134, 182.5, 254);
+  border-top: 2px solid #0d6efd;
+  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/bootstrap5-lite.css

@@ -771,4 +771,41 @@
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
 .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
   color: #dc3545;
+}
+
+.querybuilder-spinner::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgb(134, 182.5, 254);
+  border-top: 2px solid #0d6efd;
+  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);
+  }
 }