@designcrowd/fe-shared-lib 1.5.31 → 1.5.32-ast-dbc

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

@@ -1,146 +0,0 @@
-<template>
-  <div class="tw-relative tw-flex tw-items-center tw-justify-center tw-w-24 tw-h-24">
-    <!-- Central AI core -->
-    <div class="tw-absolute tw-w-12 tw-h-12 tw-rounded-full tw-bg-gradient-to-r tw-from-blue-500 tw-to-purple-600 tw-animate-pulse"></div>
-
-    <!-- Orbiting sparkles -->
-    <div
-      v-for="(frame, index) in frames"
-      :key="`sparkle-${index}`"
-      :class="[
-        'tw-absolute tw-w-2 tw-h-2 tw-rounded-full tw-transition-all tw-duration-300',
-        currentFrame === index ? 'tw-opacity-100 tw-scale-125' : 'tw-opacity-40 tw-scale-75',
-        getSparkleColor(index),
-        getSparklePosition(index)
-      ]"
-      :style="getSparkleStyle(index)"
-    ></div>
-
-    <!-- Pulsing rings -->
-    <div class="tw-absolute tw-w-16 tw-h-16 tw-rounded-full tw-border tw-border-blue-200 tw-animate-ping tw-opacity-30"></div>
-    <div class="tw-absolute tw-w-20 tw-h-20 tw-rounded-full tw-border tw-border-purple-200 tw-animate-ping tw-animation-delay-75 tw-opacity-20"></div>
-
-    <!-- Screen reader text -->
-    <span class="tw-sr-only">{{ alt }}</span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AiPoweredLoader',
-  props: {
-    interval: {
-      type: Number,
-      default: 150,
-    },
-    alt: {
-      type: String,
-      default: 'loading',
-    },
-  },
-  data() {
-    return {
-      currentFrame: 0,
-      frames: 8, // Number of sparkles
-      animationInterval: null,
-    };
-  },
-  mounted() {
-    this.startAnimation();
-  },
-  beforeUnmount() {
-    this.stopAnimation();
-  },
-  methods: {
-    startAnimation() {
-      this.animationInterval = setInterval(() => {
-        this.currentFrame = (this.currentFrame + 1) % this.frames;
-      }, this.interval);
-    },
-    stopAnimation() {
-      if (this.animationInterval) {
-        clearInterval(this.animationInterval);
-        this.animationInterval = null;
-      }
-    },
-    getSparkleColor(index) {
-      const colors = [
-        'tw-bg-blue-400',
-        'tw-bg-purple-400',
-        'tw-bg-indigo-400',
-        'tw-bg-cyan-400',
-        'tw-bg-blue-300',
-        'tw-bg-purple-300',
-        'tw-bg-indigo-300',
-        'tw-bg-cyan-300',
-      ];
-      return colors[index % colors.length];
-    },
-    getSparklePosition(index) {
-      // Position sparkles in a circle around the center
-      const angle = (index / this.frames) * 2 * Math.PI;
-      const radius = 35; // Distance from center
-      const x = Math.cos(angle) * radius;
-      const y = Math.sin(angle) * radius;
-
-      return {
-        transform: `translate(${x}px, ${y}px)`,
-      };
-    },
-    getSparkleStyle(index) {
-      const angle = (index / this.frames) * 2 * Math.PI;
-      const radius = 35;
-      const x = Math.cos(angle) * radius;
-      const y = Math.sin(angle) * radius;
-
-      return {
-        transform: `translate(${x}px, ${y}px)`,
-        animationDelay: `${index * (this.interval / this.frames)}ms`,
-      };
-    },
-  },
-};
-</script>
-
-<style scoped>
-@keyframes sparkle-glow {
-  0%, 100% {
-    transform: scale(0.8);
-    opacity: 0.6;
-  }
-  50% {
-    transform: scale(1.2);
-    opacity: 1;
-  }
-}
-
-.tw-animate-sparkle {
-  animation: sparkle-glow 1s ease-in-out infinite;
-}
-
-@keyframes gentle-rotation {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.ai-loader-container {
-  animation: gentle-rotation 4s linear infinite;
-}
-
-/* Custom animation delays for staggered effect */
-.tw-animation-delay-75 {
-  animation-delay: 75ms;
-}
-
-.tw-animation-delay-150 {
-  animation-delay: 150ms;
-}
-
-.tw-animation-delay-225 {
-  animation-delay: 225ms;
-}
-</style>