@infonomic/uikit 6.3.1 → 6.4.0

package/dist/loaders/@types/index.d.ts

@@ -1,7 +1,7 @@
 export type LoaderProps = {
     /** hex color */
     color?: string;
-    /** size in pixel */
-    size?: number;
+    /** size as a number (px) or string with units (e.g. '2rem') */
+    size?: number | string;
 } & React.HTMLAttributes<HTMLDivElement>;
 //# sourceMappingURL=index.d.ts.map

package/dist/loaders/@types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/loaders/@types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/loaders/@types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA"}

package/dist/loaders/ellipses.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ellipses.d.ts","sourceRoot":"","sources":["../../src/loaders/ellipses.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAS,EACT,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsBjC"}
+{"version":3,"file":"ellipses.d.ts","sourceRoot":"","sources":["../../src/loaders/ellipses.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGpD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAI,EACJ,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4BjC"}

package/dist/loaders/ellipses.js

@@ -1,21 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
-function LoaderEllipsis({ color, size = 80, className, style, ...rest }) {
-    const height = 0.5 * size;
+import ellipses_module from "./ellipses.module.js";
+function LoaderEllipsis({ color, size, className, style, ...rest }) {
+    const ellipsisStyle = {
+        ...style
+    };
+    if (null != size) ellipsisStyle['--loader-ellipsis-size'] = 'number' == typeof size ? `${size}px` : size;
+    if (color) ellipsisStyle['--loader-ellipsis-color'] = color;
     const circles = [
         ...Array(4)
     ].map((_, index)=>/*#__PURE__*/ jsx("div", {
-            style: {
-                backgroundColor: color ? color : 'var(--loader-color)'
-            }
+            className: classnames('infonomic-loader-ellipsis-dot', ellipses_module["loader-ellipsis-dot"])
         }, index));
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('lds-ellipsis', className),
-        style: {
-            ...style,
-            width: size,
-            height
-        },
+        className: classnames('infonomic-loader-ellipsis', ellipses_module["loader-ellipsis"], className),
+        style: ellipsisStyle,
         ...rest,
         children: circles
     });

package/dist/loaders/ellipses.module.css

@@ -0,0 +1,79 @@
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
+
+@layer infonomic-components {
+  .loader-ellipsis,
+  :global(.infonomic-loader-ellipsis) {
+    --_size: var(--loader-ellipsis-size, 80px);
+    --_color: var(--loader-ellipsis-color, var(--loader-color, currentColor));
+    display: inline-block;
+    position: relative;
+    width: var(--_size);
+    height: calc(var(--_size) * 0.5);
+  }
+
+  .loader-ellipsis-dot,
+  :global(.infonomic-loader-ellipsis-dot) {
+    position: absolute;
+    top: 41.25%;
+    width: 16.25%;
+    height: 32.25%;
+    border-radius: 50%;
+    background: var(--_color);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+
+  .loader-ellipsis-dot:nth-child(1) {
+    left: 10%;
+    animation: loader-ellipsis-grow 0.6s infinite;
+  }
+
+  .loader-ellipsis-dot:nth-child(2) {
+    left: 10%;
+    animation: loader-ellipsis-slide 0.6s infinite;
+  }
+
+  .loader-ellipsis-dot:nth-child(3) {
+    left: 40%;
+    animation: loader-ellipsis-slide 0.6s infinite;
+  }
+
+  .loader-ellipsis-dot:nth-child(4) {
+    left: 70%;
+    animation: loader-ellipsis-shrink 0.6s infinite;
+  }
+
+  @keyframes loader-ellipsis-grow {
+    0% {
+      transform: scale(0);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes loader-ellipsis-shrink {
+    0% {
+      transform: scale(1);
+    }
+
+    100% {
+      transform: scale(0);
+    }
+  }
+
+  @keyframes loader-ellipsis-slide {
+    0% {
+      transform: translate(0, 0);
+    }
+
+    100% {
+      transform: translate(184.61%, 0);
+    }
+  }
+}

package/dist/loaders/ellipses.module.js

@@ -0,0 +1,14 @@
+import "./ellipses_module.css";
+const ellipses_module = {
+    "loader-ellipsis": "loader-ellipsis-KxN5UN",
+    loaderEllipsis: "loader-ellipsis-KxN5UN",
+    "loader-ellipsis-dot": "loader-ellipsis-dot-o11IHe",
+    loaderEllipsisDot: "loader-ellipsis-dot-o11IHe",
+    "loader-ellipsis-grow": "loader-ellipsis-grow-PDS3mJ",
+    loaderEllipsisGrow: "loader-ellipsis-grow-PDS3mJ",
+    "loader-ellipsis-slide": "loader-ellipsis-slide-hWB8Kb",
+    loaderEllipsisSlide: "loader-ellipsis-slide-hWB8Kb",
+    "loader-ellipsis-shrink": "loader-ellipsis-shrink-CF5JUt",
+    loaderEllipsisShrink: "loader-ellipsis-shrink-CF5JUt"
+};
+export default ellipses_module;

package/dist/loaders/ellipses_module.css

@@ -0,0 +1,73 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  :is(.loader-ellipsis-KxN5UN, .infonomic-loader-ellipsis) {
+    --_size: var(--loader-ellipsis-size, 80px);
+    --_color: var(--loader-ellipsis-color, var(--loader-color, currentColor));
+    width: var(--_size);
+    height: calc(var(--_size) * .5);
+    display: inline-block;
+    position: relative;
+  }
+
+  :is(.loader-ellipsis-dot-o11IHe, .infonomic-loader-ellipsis-dot) {
+    background: var(--_color);
+    border-radius: 50%;
+    width: 16.25%;
+    height: 32.25%;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    position: absolute;
+    top: 41.25%;
+  }
+
+  .loader-ellipsis-dot-o11IHe:first-child {
+    animation: .6s infinite loader-ellipsis-grow-PDS3mJ;
+    left: 10%;
+  }
+
+  .loader-ellipsis-dot-o11IHe:nth-child(2) {
+    animation: .6s infinite loader-ellipsis-slide-hWB8Kb;
+    left: 10%;
+  }
+
+  .loader-ellipsis-dot-o11IHe:nth-child(3) {
+    animation: .6s infinite loader-ellipsis-slide-hWB8Kb;
+    left: 40%;
+  }
+
+  .loader-ellipsis-dot-o11IHe:nth-child(4) {
+    animation: .6s infinite loader-ellipsis-shrink-CF5JUt;
+    left: 70%;
+  }
+
+  @keyframes loader-ellipsis-grow-PDS3mJ {
+    0% {
+      transform: scale(0);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes loader-ellipsis-shrink-CF5JUt {
+    0% {
+      transform: scale(1);
+    }
+
+    100% {
+      transform: scale(0);
+    }
+  }
+
+  @keyframes loader-ellipsis-slide-hWB8Kb {
+    0% {
+      transform: translate(0);
+    }
+
+    100% {
+      transform: translate(184.61%);
+    }
+  }
+}
+

package/dist/loaders/ring.d.ts

@@ -1,4 +1,4 @@
 import type React from 'react';
 import type { LoaderProps } from './@types/index.js';
-export declare function LoaderRing({ color, size, className, style }: LoaderProps): React.JSX.Element;
+export declare function LoaderRing({ color, size, className, style, ...rest }: LoaderProps): React.JSX.Element;
 //# sourceMappingURL=ring.d.ts.map

package/dist/loaders/ring.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ring.d.ts","sourceRoot":"","sources":["../../src/loaders/ring.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,IAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyBjG"}
+{"version":3,"file":"ring.d.ts","sourceRoot":"","sources":["../../src/loaders/ring.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGpD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8BjC"}

package/dist/loaders/ring.js

@@ -1,24 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
-function LoaderRing({ color, size = 60, className, style }) {
+import ring_module from "./ring.module.js";
+function LoaderRing({ color, size, className, style, ...rest }) {
+    const ringStyle = {
+        ...style
+    };
+    if (null != size) ringStyle['--loader-ring-size'] = 'number' == typeof size ? `${size}px` : size;
+    if (color) ringStyle['--loader-ring-color'] = color;
     const circles = [
         ...Array(4)
     ].map((_, index)=>/*#__PURE__*/ jsx("div", {
-            style: {
-                borderColor: `${color || 'var(--loader-color)'} transparent transparent transparent`,
-                width: 0.8 * size,
-                height: 0.8 * size,
-                margin: 0.1 * size,
-                borderWidth: 0.1 * size
-            }
+            className: classnames('infonomic-loader-ring-arc', ring_module["loader-ring-arc"])
         }, index));
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('lds-ring', className),
-        style: {
-            width: size,
-            height: size,
-            ...style
-        },
+        className: classnames('infonomic-loader-ring', ring_module["loader-ring"], className),
+        style: ringStyle,
+        ...rest,
         children: circles
     });
 }

package/dist/loaders/ring.module.css

@@ -0,0 +1,55 @@
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
+
+@layer infonomic-components {
+  .loader-ring,
+  :global(.infonomic-loader-ring) {
+    --_size: var(--loader-ring-size, 60px);
+    --_color: var(--loader-ring-color, var(--loader-color, currentColor));
+    display: inline-block;
+    position: relative;
+    width: var(--_size);
+    height: var(--_size);
+  }
+
+  .loader-ring-arc,
+  :global(.infonomic-loader-ring-arc) {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: calc(var(--_size) * 0.8);
+    height: calc(var(--_size) * 0.8);
+    margin: calc(var(--_size) * 0.1);
+    border-width: calc(var(--_size) * 0.1);
+    border-radius: 50%;
+    animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-style: solid;
+    border-color: var(--_color) transparent transparent transparent;
+  }
+
+  .loader-ring-arc:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+
+  .loader-ring-arc:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+
+  .loader-ring-arc:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+
+  @keyframes loader-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

package/dist/loaders/ring.module.js

@@ -0,0 +1,8 @@
+import "./ring_module.css";
+const ring_module = {
+    "loader-ring": "loader-ring-qd6bmX",
+    loaderRing: "loader-ring-qd6bmX",
+    "loader-ring-arc": "loader-ring-arc-MS2FMV",
+    loaderRingArc: "loader-ring-arc-MS2FMV"
+};
+export default ring_module;

package/dist/loaders/ring_module.css

@@ -0,0 +1,49 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  :is(.loader-ring-qd6bmX, .infonomic-loader-ring) {
+    --_size: var(--loader-ring-size, 60px);
+    --_color: var(--loader-ring-color, var(--loader-color, currentColor));
+    width: var(--_size);
+    height: var(--_size);
+    display: inline-block;
+    position: relative;
+  }
+
+  :is(.loader-ring-arc-MS2FMV, .infonomic-loader-ring-arc) {
+    box-sizing: border-box;
+    width: calc(var(--_size) * .8);
+    height: calc(var(--_size) * .8);
+    margin: calc(var(--_size) * .1);
+    border-width: calc(var(--_size) * .1);
+    border-style: solid;
+    border-color: var(--_color) transparent transparent transparent;
+    border-radius: 50%;
+    animation: 1.2s cubic-bezier(.5, 0, .5, 1) infinite loader-ring-qd6bmX;
+    display: block;
+    position: absolute;
+  }
+
+  .loader-ring-arc-MS2FMV:first-child {
+    animation-delay: -.45s;
+  }
+
+  .loader-ring-arc-MS2FMV:nth-child(2) {
+    animation-delay: -.3s;
+  }
+
+  .loader-ring-arc-MS2FMV:nth-child(3) {
+    animation-delay: -.15s;
+  }
+
+  @keyframes loader-ring-qd6bmX {
+    0% {
+      transform: rotate(0);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+

package/dist/loaders/spinner.d.ts

@@ -1,6 +1,4 @@
 import type React from 'react';
 import type { LoaderProps } from './@types/index.js';
-type SpinnerProps = Omit<LoaderProps, 'size'>;
-export declare function LoaderSpinner({ color, className, style }: SpinnerProps): React.JSX.Element;
-export {};
+export declare function LoaderSpinner({ color, size, className, style, ...rest }: LoaderProps): React.JSX.Element;
 //# sourceMappingURL=spinner.d.ts.map

package/dist/loaders/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/loaders/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,KAAK,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;AAE7C,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkB1F"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/loaders/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGpD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,IAAI,EACJ,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqCjC"}

package/dist/loaders/spinner.js

@@ -1,21 +1,24 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
-function LoaderSpinner({ color, className, style }) {
+import spinner_module from "./spinner.module.js";
+function LoaderSpinner({ color, size, className, style, ...rest }) {
     const circles = [
         ...Array(12)
     ].map((_, index)=>/*#__PURE__*/ jsx("div", {
+            className: classnames('infonomic-loader-spinner-blade', spinner_module["loader-spinner-blade"]),
             children: /*#__PURE__*/ jsx("div", {
-                className: classnames('div-after'),
-                style: {
-                    backgroundColor: color ? color : 'var(--loader-color)'
-                }
+                className: classnames('infonomic-loader-spinner-blade-inner', spinner_module["loader-spinner-blade-inner"])
             })
         }, index));
+    const spinnerStyle = {
+        ...style
+    };
+    if (null != size) spinnerStyle['--loader-spinner-size'] = 'number' == typeof size ? `${size}px` : size;
+    if (color) spinnerStyle['--loader-spinner-color'] = color;
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('lds-spinner', className),
-        style: {
-            ...style
-        },
+        className: classnames('infonomic-loader-spinner', spinner_module["loader-spinner"], className),
+        style: spinnerStyle,
+        ...rest,
         children: circles
     });
 }

package/dist/loaders/spinner.module.css

@@ -0,0 +1,106 @@
+@layer infonomic-base,
+  infonomic-functional,
+  infonomic-utilities,
+  infonomic-theme,
+  infonomic-typography,
+  infonomic-components;
+
+@layer infonomic-components {
+  .loader-spinner,
+  :global(.infonomic-loader-spinner) {
+    --_size: var(--loader-spinner-size, 56px);
+    --_color: var(--loader-spinner-color, var(--loader-color, currentColor));
+    display: inline-block;
+    position: relative;
+    width: var(--_size);
+    height: var(--_size);
+  }
+
+  .loader-spinner-blade,
+  :global(.infonomic-loader-spinner-blade) {
+    transform-origin: calc(var(--_size) * 0.5) calc(var(--_size) * 0.5714);
+    animation: loader-spinner 1.2s linear infinite;
+  }
+
+  .loader-spinner-blade-inner,
+  :global(.infonomic-loader-spinner-blade-inner) {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: calc(var(--_size) * 0.4464);
+    width: calc(var(--_size) * 0.0893);
+    height: calc(var(--_size) * 0.25);
+    border-radius: 20%;
+    background: var(--_color);
+  }
+
+  .loader-spinner-blade:nth-child(1) {
+    transform: rotate(0deg);
+    animation-delay: -1.1s;
+  }
+
+  .loader-spinner-blade:nth-child(2) {
+    transform: rotate(30deg);
+    animation-delay: -1s;
+  }
+
+  .loader-spinner-blade:nth-child(3) {
+    transform: rotate(60deg);
+    animation-delay: -0.9s;
+  }
+
+  .loader-spinner-blade:nth-child(4) {
+    transform: rotate(90deg);
+    animation-delay: -0.8s;
+  }
+
+  .loader-spinner-blade:nth-child(5) {
+    transform: rotate(120deg);
+    animation-delay: -0.7s;
+  }
+
+  .loader-spinner-blade:nth-child(6) {
+    transform: rotate(150deg);
+    animation-delay: -0.6s;
+  }
+
+  .loader-spinner-blade:nth-child(7) {
+    transform: rotate(180deg);
+    animation-delay: -0.5s;
+  }
+
+  .loader-spinner-blade:nth-child(8) {
+    transform: rotate(210deg);
+    animation-delay: -0.4s;
+  }
+
+  .loader-spinner-blade:nth-child(9) {
+    transform: rotate(240deg);
+    animation-delay: -0.3s;
+  }
+
+  .loader-spinner-blade:nth-child(10) {
+    transform: rotate(270deg);
+    animation-delay: -0.2s;
+  }
+
+  .loader-spinner-blade:nth-child(11) {
+    transform: rotate(300deg);
+    animation-delay: -0.1s;
+  }
+
+  .loader-spinner-blade:nth-child(12) {
+    transform: rotate(330deg);
+    animation-delay: 0s;
+  }
+
+  @keyframes loader-spinner {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+}

package/dist/loaders/spinner.module.js

@@ -0,0 +1,10 @@
+import "./spinner_module.css";
+const spinner_module = {
+    "loader-spinner": "loader-spinner-QHtGI_",
+    loaderSpinner: "loader-spinner-QHtGI_",
+    "loader-spinner-blade": "loader-spinner-blade-DQvsAd",
+    loaderSpinnerBlade: "loader-spinner-blade-DQvsAd",
+    "loader-spinner-blade-inner": "loader-spinner-blade-inner-rWTE9U",
+    loaderSpinnerBladeInner: "loader-spinner-blade-inner-rWTE9U"
+};
+export default spinner_module;

package/dist/loaders/spinner_module.css

@@ -0,0 +1,99 @@
+@layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  :is(.loader-spinner-QHtGI_, .infonomic-loader-spinner) {
+    --_size: var(--loader-spinner-size, 56px);
+    --_color: var(--loader-spinner-color, var(--loader-color, currentColor));
+    width: var(--_size);
+    height: var(--_size);
+    display: inline-block;
+    position: relative;
+  }
+
+  :is(.loader-spinner-blade-DQvsAd, .infonomic-loader-spinner-blade) {
+    transform-origin: calc(var(--_size) * .5) calc(var(--_size) * .5714);
+    animation: 1.2s linear infinite loader-spinner-QHtGI_;
+  }
+
+  :is(.loader-spinner-blade-inner-rWTE9U, .infonomic-loader-spinner-blade-inner) {
+    top: 0;
+    left: calc(var(--_size) * .4464);
+    width: calc(var(--_size) * .0893);
+    height: calc(var(--_size) * .25);
+    background: var(--_color);
+    border-radius: 20%;
+    display: block;
+    position: absolute;
+  }
+
+  .loader-spinner-blade-DQvsAd:first-child {
+    animation-delay: -1.1s;
+    transform: rotate(0);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(2) {
+    animation-delay: -1s;
+    transform: rotate(30deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(3) {
+    animation-delay: -.9s;
+    transform: rotate(60deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(4) {
+    animation-delay: -.8s;
+    transform: rotate(90deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(5) {
+    animation-delay: -.7s;
+    transform: rotate(120deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(6) {
+    animation-delay: -.6s;
+    transform: rotate(150deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(7) {
+    animation-delay: -.5s;
+    transform: rotate(180deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(8) {
+    animation-delay: -.4s;
+    transform: rotate(210deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(9) {
+    animation-delay: -.3s;
+    transform: rotate(240deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(10) {
+    animation-delay: -.2s;
+    transform: rotate(270deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(11) {
+    animation-delay: -.1s;
+    transform: rotate(300deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(12) {
+    animation-delay: 0s;
+    transform: rotate(330deg);
+  }
+
+  @keyframes loader-spinner-QHtGI_ {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+}
+