@designcrowd/fe-shared-lib 1.7.0-eng-4159 → 1.7.1

package/src/atoms/components/AiPoweredLoader/AiPoweredLoader.vue

@@ -1,120 +1,120 @@
-<template>
-  <div class="sparkle-loader" role="status" :aria-label="alt">
-    <svg :width="size" :height="size" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
-      <g id="bottom-star">
-        <path
-          d="M39.286883,33.960772c-6.044693,2.417601-7.991402,4.376919-10.393442,10.460772C26.491402,38.337691,24.544694,36.378373,18.5,33.960772C24.544694,31.543171,26.491402,29.583852,28.893441,23.5c2.402041,6.083852,4.348749,8.043171,10.393442,10.460772Z"
-          transform="matrix(1 0 0 1 -5 -6)"
-          fill="#8b5cf6"
-        ></path>
-      </g>
-      <g id="top-star">
-        <path
-          d="M39.056802,33.844967c-5.977787,2.390837-7.902948,4.328466-10.278401,10.344967C26.402949,38.173434,24.477787,36.235805,18.5,33.844967C24.477787,31.454131,26.402949,29.516502,28.778401,23.5c2.375453,6.016502,4.300614,7.954131,10.278401,10.344967Z"
-          transform="matrix(1 0 0 1 -5 -61)"
-          fill="#8b5cf6"
-        ></path>
-      </g>
-      <g id="primary">
-        <path
-          d="M65.653886,47.229432c-13.71205,5.484135-18.128049,9.928695-23.576943,23.729431C36.62805,57.158127,32.212051,52.713567,18.5,47.229432C32.212051,41.745296,36.62805,37.300736,42.076943,23.5c5.448894,13.800736,9.864893,18.245296,23.576943,23.729432Z"
-          transform="matrix(1.595951 0.008736 -0.00868 1.585695 -77.344676 -75.246035)"
-          fill="#8b5cf6"
-        ></path>
-      </g>
-      <g class="arc">
-        <path
-          d="M 0 -90
-      A 90 90 0 0 1 85 -30"
-          stroke="url(#sparkle-grad-2)"
-          stroke-width="16"
-          stroke-linecap="round"
-          fill="transparent"
-        ></path>
-      </g>
-      <defs>
-        <linearGradient id="sparkle-grad-2" x1="0" y1="-90" x2="85" y2="-30" gradientUnits="userSpaceOnUse">
-          <stop stop-color="#E3E3E3" stop-opacity="0"></stop>
-          <stop offset="0.33" stop-color="#E3E3E3" stop-opacity="0.3"></stop>
-          <stop offset="0.66" stop-color="#8b5cf6" stop-opacity="0.5"></stop>
-          <stop offset="1" stop-color="#d946ef"></stop>
-        </linearGradient>
-      </defs>
-    </svg>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  size?: number;
-  alt?: string;
-}
-
-withDefaults(defineProps<Props>(), {
-  size: 96,
-  alt: 'loading',
-});
-</script>
-
-<style scoped>
-.arc {
-  animation: ai-loader-circle 2000ms infinite linear;
-}
-
-@keyframes ai-loader-circle {
-  0% {
-    transform: rotateZ(0deg);
-  }
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
-
-#primary {
-  animation: ai-loader-primary 2000ms infinite ease-in-out;
-}
-
-@keyframes ai-loader-primary {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(0.5) translate(-7.5px);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-#top-star {
-  animation: ai-loader-secondary-top 2000ms infinite ease-in-out;
-}
-
-#bottom-star {
-  animation: ai-loader-secondary-bottom 2000ms infinite ease-in-out;
-}
-
-@keyframes ai-loader-secondary-bottom {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.5) translate(-7.5px, -7.5px);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes ai-loader-secondary-top {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.5) translate(-7.5px, 7.5px);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-</style>
+<template>
+  <div class="sparkle-loader" role="status" :aria-label="alt">
+    <svg :width="size" :height="size" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
+      <g id="bottom-star">
+        <path
+          d="M39.286883,33.960772c-6.044693,2.417601-7.991402,4.376919-10.393442,10.460772C26.491402,38.337691,24.544694,36.378373,18.5,33.960772C24.544694,31.543171,26.491402,29.583852,28.893441,23.5c2.402041,6.083852,4.348749,8.043171,10.393442,10.460772Z"
+          transform="matrix(1 0 0 1 -5 -6)"
+          fill="#8b5cf6"
+        ></path>
+      </g>
+      <g id="top-star">
+        <path
+          d="M39.056802,33.844967c-5.977787,2.390837-7.902948,4.328466-10.278401,10.344967C26.402949,38.173434,24.477787,36.235805,18.5,33.844967C24.477787,31.454131,26.402949,29.516502,28.778401,23.5c2.375453,6.016502,4.300614,7.954131,10.278401,10.344967Z"
+          transform="matrix(1 0 0 1 -5 -61)"
+          fill="#8b5cf6"
+        ></path>
+      </g>
+      <g id="primary">
+        <path
+          d="M65.653886,47.229432c-13.71205,5.484135-18.128049,9.928695-23.576943,23.729431C36.62805,57.158127,32.212051,52.713567,18.5,47.229432C32.212051,41.745296,36.62805,37.300736,42.076943,23.5c5.448894,13.800736,9.864893,18.245296,23.576943,23.729432Z"
+          transform="matrix(1.595951 0.008736 -0.00868 1.585695 -77.344676 -75.246035)"
+          fill="#8b5cf6"
+        ></path>
+      </g>
+      <g class="arc">
+        <path
+          d="M 0 -90
+      A 90 90 0 0 1 85 -30"
+          stroke="url(#sparkle-grad-2)"
+          stroke-width="16"
+          stroke-linecap="round"
+          fill="transparent"
+        ></path>
+      </g>
+      <defs>
+        <linearGradient id="sparkle-grad-2" x1="0" y1="-90" x2="85" y2="-30" gradientUnits="userSpaceOnUse">
+          <stop stop-color="#E3E3E3" stop-opacity="0"></stop>
+          <stop offset="0.33" stop-color="#E3E3E3" stop-opacity="0.3"></stop>
+          <stop offset="0.66" stop-color="#8b5cf6" stop-opacity="0.5"></stop>
+          <stop offset="1" stop-color="#d946ef"></stop>
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  size?: number;
+  alt?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 96,
+  alt: 'loading',
+});
+</script>
+
+<style scoped>
+.arc {
+  animation: ai-loader-circle 2000ms infinite linear;
+}
+
+@keyframes ai-loader-circle {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+#primary {
+  animation: ai-loader-primary 2000ms infinite ease-in-out;
+}
+
+@keyframes ai-loader-primary {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.5) translate(-7.5px);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+#top-star {
+  animation: ai-loader-secondary-top 2000ms infinite ease-in-out;
+}
+
+#bottom-star {
+  animation: ai-loader-secondary-bottom 2000ms infinite ease-in-out;
+}
+
+@keyframes ai-loader-secondary-bottom {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5) translate(-7.5px, -7.5px);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes ai-loader-secondary-top {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.5) translate(-7.5px, 7.5px);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>