satyam-animated-spinner 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 bitcot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,306 @@
+# @bitcot/animated-spinner
+
+A beautiful, customizable animated spinner component with multiple animation styles. Perfect for loading states in any JavaScript/TypeScript project.
+
+![npm version](https://img.shields.io/npm/v/@bitcot/animated-spinner)
+![license](https://img.shields.io/npm/l/@bitcot/animated-spinner)
+
+## ✨ Features
+
+- 🎨 **5 Beautiful Animation Styles**: Circle, Dots, Bars, Ring, and Pulse
+- 🎯 **Fully Customizable**: Size, color, speed, and overlay options
+- 📦 **Lightweight**: Zero dependencies, minimal bundle size
+- 💪 **TypeScript Support**: Full type definitions included
+- 🌐 **Framework Agnostic**: Works with vanilla JS, React, Vue, Angular, and more
+- 🚀 **Easy to Use**: Simple API with sensible defaults
+
+## 📦 Installation
+
+```bash
+npm install @bitcot/animated-spinner
+```
+
+## 🚀 Quick Start
+
+### Basic Usage
+
+```javascript
+import { AnimatedSpinner } from '@bitcot/animated-spinner';
+
+// Create a spinner
+const spinner = new AnimatedSpinner();
+
+// Show it
+spinner.show();
+
+// Hide it when done
+setTimeout(() => {
+  spinner.hide();
+}, 2000);
+```
+
+### With Custom Options
+
+```javascript
+import { AnimatedSpinner } from '@bitcot/animated-spinner';
+
+const spinner = new AnimatedSpinner({
+  type: 'dots',           // Animation type
+  size: 60,               // Size in pixels
+  color: '#ff6b6b',       // Primary color
+  speed: 1.5,             // Animation speed in seconds
+  overlay: true,          // Show overlay background
+  overlayColor: 'rgba(0, 0, 0, 0.7)'
+});
+
+spinner.show();
+```
+
+## 🎨 Spinner Types
+
+The package includes 5 different animation styles:
+
+- **`circle`** - Classic rotating circle with gap (default)
+- **`dots`** - Three pulsing dots
+- **`bars`** - Three bouncing bars
+- **`ring`** - Rotating ring with pulse effect
+- **`pulse`** - Single pulsing circle
+
+## 📖 API Reference
+
+### Constructor Options
+
+```typescript
+interface SpinnerOptions {
+  type?: 'circle' | 'dots' | 'bars' | 'ring' | 'pulse';  // Default: 'circle'
+  size?: number;                    // Default: 40
+  color?: string;                   // Default: '#3b82f6'
+  speed?: number;                   // Default: 1
+  container?: HTMLElement;          // Default: document.body
+  overlay?: boolean;                // Default: true
+  overlayColor?: string;            // Default: 'rgba(0, 0, 0, 0.5)'
+  className?: string;               // Optional custom CSS class
+}
+```
+
+### Methods
+
+#### `show()`
+Display the spinner.
+
+```javascript
+spinner.show();
+```
+
+#### `hide()`
+Hide the spinner with a fade-out animation.
+
+```javascript
+spinner.hide();
+```
+
+#### `setType(type)`
+Change the spinner animation type.
+
+```javascript
+spinner.setType('dots');
+```
+
+#### `setColor(color)`
+Update the spinner color.
+
+```javascript
+spinner.setColor('#ff6b6b');
+```
+
+#### `setSize(size)`
+Update the spinner size.
+
+```javascript
+spinner.setSize(60);
+```
+
+#### `setSpeed(speed)`
+Update the animation speed (in seconds).
+
+```javascript
+spinner.setSpeed(2);
+```
+
+#### `isShowing()`
+Check if the spinner is currently visible.
+
+```javascript
+if (spinner.isShowing()) {
+  console.log('Spinner is visible');
+}
+```
+
+#### `destroy()`
+Clean up and remove the spinner.
+
+```javascript
+spinner.destroy();
+```
+
+## 💡 Usage Examples
+
+### With Async Operations
+
+```javascript
+import { AnimatedSpinner } from '@bitcot/animated-spinner';
+
+const spinner = new AnimatedSpinner({ type: 'ring' });
+
+async function fetchData() {
+  spinner.show();
+  
+  try {
+    const response = await fetch('https://api.example.com/data');
+    const data = await response.json();
+    return data;
+  } finally {
+    spinner.hide();
+  }
+}
+```
+
+### Multiple Spinners
+
+```javascript
+import { AnimatedSpinner } from '@bitcot/animated-spinner';
+
+// Full-page spinner
+const pageSpinner = new AnimatedSpinner({
+  type: 'circle',
+  overlay: true
+});
+
+// Inline spinner in a specific container
+const containerSpinner = new AnimatedSpinner({
+  type: 'dots',
+  size: 30,
+  overlay: false,
+  container: document.getElementById('my-container')
+});
+```
+
+### React Integration
+
+```jsx
+import { useEffect, useRef } from 'react';
+import { AnimatedSpinner } from '@bitcot/animated-spinner';
+
+function MyComponent() {
+  const spinnerRef = useRef(null);
+
+  useEffect(() => {
+    spinnerRef.current = new AnimatedSpinner({
+      type: 'pulse',
+      color: '#3b82f6'
+    });
+
+    return () => {
+      spinnerRef.current?.destroy();
+    };
+  }, []);
+
+  const handleClick = async () => {
+    spinnerRef.current?.show();
+    await someAsyncOperation();
+    spinnerRef.current?.hide();
+  };
+
+  return <button onClick={handleClick}>Load Data</button>;
+}
+```
+
+### Vue Integration
+
+```vue
+<template>
+  <button @click="loadData">Load Data</button>
+</template>
+
+<script>
+import { AnimatedSpinner } from '@bitcot/animated-spinner';
+
+export default {
+  data() {
+    return {
+      spinner: null
+    };
+  },
+  mounted() {
+    this.spinner = new AnimatedSpinner({
+      type: 'bars',
+      color: '#10b981'
+    });
+  },
+  beforeUnmount() {
+    this.spinner?.destroy();
+  },
+  methods: {
+    async loadData() {
+      this.spinner.show();
+      await this.fetchData();
+      this.spinner.hide();
+    }
+  }
+};
+</script>
+```
+
+## 🎨 Customization
+
+### Custom Colors
+
+```javascript
+// Solid color
+const spinner = new AnimatedSpinner({
+  color: '#ff6b6b'
+});
+
+// Use CSS variables
+const spinner = new AnimatedSpinner({
+  color: 'var(--primary-color)'
+});
+```
+
+### Custom Container
+
+```javascript
+// Show spinner in a specific element
+const spinner = new AnimatedSpinner({
+  container: document.getElementById('loading-area'),
+  overlay: false
+});
+```
+
+### Custom Styling
+
+```javascript
+const spinner = new AnimatedSpinner({
+  className: 'my-custom-spinner'
+});
+```
+
+Then in your CSS:
+```css
+.my-custom-spinner {
+  /* Your custom styles */
+  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
+}
+```
+
+## 📄 License
+
+MIT © bitcot
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 🐛 Issues
+
+If you find a bug or have a feature request, please open an issue on [GitHub](https://github.com/bitcot/animated-spinner/issues).

package/dist/index.cjs.css

@@ -0,0 +1,2 @@
+.animated-spinner-overlay{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;transition:opacity .3s ease;width:100%;z-index:9999}.animated-spinner-container{display:inline-block;position:relative}.spinner-circle{animation:spinner-rotate 1s linear infinite;border-radius:50%;border-style:solid}@keyframes spinner-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.spinner-dots{align-items:center;display:flex;gap:8px}.spinner-dots .dot{animation:spinner-pulse 1.4s ease-in-out infinite;border-radius:50%}.spinner-dots .dot:first-child{animation-delay:-.32s}.spinner-dots .dot:nth-child(2){animation-delay:-.16s}@keyframes spinner-pulse{0%,80%,to{opacity:.5;transform:scale(0)}40%{opacity:1;transform:scale(1)}}.spinner-bars{align-items:center;display:flex;gap:4px}.spinner-bars .bar{animation:spinner-bounce 1.2s ease-in-out infinite;border-radius:2px}.spinner-bars .bar:first-child{animation-delay:-.32s}.spinner-bars .bar:nth-child(2){animation-delay:-.16s}@keyframes spinner-bounce{0%,80%,to{transform:scaleY(.4)}40%{transform:scaleY(1)}}.spinner-ring{animation:spinner-rotate 1s linear infinite;border-radius:50%;position:relative}.spinner-ring:before{animation:spinner-ring-pulse 1s ease-in-out infinite;border-color:transparent;border-radius:50%;border-style:solid;bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes spinner-ring-pulse{0%{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.2)}}.spinner-pulse{animation:spinner-pulse-grow 1s ease-in-out infinite;border-radius:50%}@keyframes spinner-pulse-grow{0%,to{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}.animated-spinner-overlay.fade-in{animation:fadeIn .3s ease}.animated-spinner-overlay.fade-out{animation:fadeOut .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}
+/*# sourceMappingURL=index.cjs.css.map */

package/dist/index.cjs.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["styles.css"],"names":[],"mappings":"AACA,0BAOE,kBAAmB,CADnB,YAAa,CADb,WAAY,CAGZ,sBAAuB,CALvB,MAAO,CAFP,cAAe,CACf,KAAM,CAQN,2BAA6B,CAN7B,UAAW,CAKX,YAEF,CAEA,4BACE,oBAAqB,CACrB,iBACF,CAGA,gBAGE,2CAA4C,CAF5C,iBAAkB,CAClB,kBAEF,CAEA,0BACE,GACE,sBACF,CACA,GACE,uBACF,CACF,CAGA,cAGE,kBAAmB,CAFnB,YAAa,CACb,OAEF,CAEA,mBAEE,iDAAkD,CADlD,iBAEF,CAEA,+BACE,qBACF,CAEA,gCACE,qBACF,CAEA,yBACE,UAEE,UAAY,CADZ,kBAEF,CACA,IAEE,SAAU,CADV,kBAEF,CACF,CAGA,cAGE,kBAAmB,CAFnB,YAAa,CACb,OAEF,CAEA,mBAEE,kDAAmD,CADnD,iBAEF,CAEA,+BACE,qBACF,CAEA,gCACE,qBACF,CAEA,0BACE,UACE,oBACF,CACA,IACE,mBACF,CACF,CAGA,cAGE,2CAA4C,CAF5C,iBAAkB,CAClB,iBAEF,CAEA,qBAUE,oDAAqD,CADrD,wBAAyB,CAFzB,iBAAkB,CAClB,kBAAmB,CAFnB,QAAS,CALT,UAAW,CAGX,MAAO,CAFP,iBAAkB,CAGlB,OAAQ,CAFR,KAQF,CAEA,8BACE,GAEE,SAAU,CADV,mBAEF,CACA,GAEE,SAAU,CADV,oBAEF,CACF,CAGA,eAEE,oDAAqD,CADrD,iBAEF,CAEA,8BACE,MAEE,UAAY,CADZ,mBAEF,CACA,IAEE,SAAU,CADV,kBAEF,CACF,CAGA,kCACE,yBACF,CAEA,mCACE,0BACF,CAEA,kBACE,GACE,SACF,CACA,GACE,SACF,CACF,CAEA,mBACE,GACE,SACF,CACA,GACE,SACF,CACF","file":"index.cjs.css","sourcesContent":["/* Spinner Container */\n.animated-spinner-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  transition: opacity 0.3s ease;\n}\n\n.animated-spinner-container {\n  display: inline-block;\n  position: relative;\n}\n\n/* Circle Spinner */\n.spinner-circle {\n  border-radius: 50%;\n  border-style: solid;\n  animation: spinner-rotate 1s linear infinite;\n}\n\n@keyframes spinner-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n/* Dots Spinner */\n.spinner-dots {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.spinner-dots .dot {\n  border-radius: 50%;\n  animation: spinner-pulse 1.4s ease-in-out infinite;\n}\n\n.spinner-dots .dot:nth-child(1) {\n  animation-delay: -0.32s;\n}\n\n.spinner-dots .dot:nth-child(2) {\n  animation-delay: -0.16s;\n}\n\n@keyframes spinner-pulse {\n  0%, 80%, 100% {\n    transform: scale(0);\n    opacity: 0.5;\n  }\n  40% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* Bars Spinner */\n.spinner-bars {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.spinner-bars .bar {\n  border-radius: 2px;\n  animation: spinner-bounce 1.2s ease-in-out infinite;\n}\n\n.spinner-bars .bar:nth-child(1) {\n  animation-delay: -0.32s;\n}\n\n.spinner-bars .bar:nth-child(2) {\n  animation-delay: -0.16s;\n}\n\n@keyframes spinner-bounce {\n  0%, 80%, 100% {\n    transform: scaleY(0.4);\n  }\n  40% {\n    transform: scaleY(1);\n  }\n}\n\n/* Ring Spinner */\n.spinner-ring {\n  border-radius: 50%;\n  position: relative;\n  animation: spinner-rotate 1s linear infinite;\n}\n\n.spinner-ring::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 50%;\n  border-style: solid;\n  border-color: transparent;\n  animation: spinner-ring-pulse 1s ease-in-out infinite;\n}\n\n@keyframes spinner-ring-pulse {\n  0% {\n    transform: scale(0.8);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1.2);\n    opacity: 0;\n  }\n}\n\n/* Pulse Spinner */\n.spinner-pulse {\n  border-radius: 50%;\n  animation: spinner-pulse-grow 1s ease-in-out infinite;\n}\n\n@keyframes spinner-pulse-grow {\n  0%, 100% {\n    transform: scale(0.8);\n    opacity: 0.5;\n  }\n  50% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* Fade animations */\n.animated-spinner-overlay.fade-in {\n  animation: fadeIn 0.3s ease;\n}\n\n.animated-spinner-overlay.fade-out {\n  animation: fadeOut 0.3s ease;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n"]}

package/dist/index.cjs.js

@@ -0,0 +1,206 @@
+'use strict';
+
+class AnimatedSpinner {
+    constructor(options = {}) {
+        this.overlayElement = null;
+        this.spinnerElement = null;
+        this.isVisible = false;
+        this.options = {
+            type: options.type || 'circle',
+            size: options.size || 40,
+            color: options.color || '#3b82f6',
+            speed: options.speed || 1,
+            container: options.container || document.body,
+            overlay: options.overlay !== undefined ? options.overlay : true,
+            overlayColor: options.overlayColor || 'rgba(0, 0, 0, 0.5)',
+            className: options.className || '',
+        };
+    }
+    /**
+     * Show the spinner
+     */
+    show() {
+        if (this.isVisible)
+            return;
+        this.createSpinner();
+        this.isVisible = true;
+    }
+    /**
+     * Hide the spinner
+     */
+    hide() {
+        if (!this.isVisible || !this.overlayElement)
+            return;
+        this.overlayElement.classList.add('fade-out');
+        setTimeout(() => {
+            if (this.overlayElement && this.overlayElement.parentNode) {
+                this.overlayElement.parentNode.removeChild(this.overlayElement);
+            }
+            this.overlayElement = null;
+            this.spinnerElement = null;
+            this.isVisible = false;
+        }, 300);
+    }
+    /**
+     * Update spinner type
+     */
+    setType(type) {
+        this.options.type = type;
+        if (this.isVisible) {
+            this.hide();
+            setTimeout(() => this.show(), 300);
+        }
+    }
+    /**
+     * Update spinner color
+     */
+    setColor(color) {
+        this.options.color = color;
+        if (this.spinnerElement) {
+            this.applyStyles(this.spinnerElement);
+        }
+    }
+    /**
+     * Update spinner size
+     */
+    setSize(size) {
+        this.options.size = size;
+        if (this.spinnerElement) {
+            this.applyStyles(this.spinnerElement);
+        }
+    }
+    /**
+     * Update animation speed
+     */
+    setSpeed(speed) {
+        this.options.speed = speed;
+        if (this.spinnerElement) {
+            this.spinnerElement.style.animationDuration = `${speed}s`;
+        }
+    }
+    createSpinner() {
+        // Create overlay
+        this.overlayElement = document.createElement('div');
+        this.overlayElement.className = 'animated-spinner-overlay fade-in';
+        if (this.options.overlay) {
+            this.overlayElement.style.backgroundColor = this.options.overlayColor;
+        }
+        else {
+            this.overlayElement.style.backgroundColor = 'transparent';
+            this.overlayElement.style.pointerEvents = 'none';
+        }
+        // Create spinner container
+        const container = document.createElement('div');
+        container.className = 'animated-spinner-container';
+        if (this.options.className) {
+            container.classList.add(this.options.className);
+        }
+        // Create spinner based on type
+        this.spinnerElement = this.createSpinnerElement();
+        container.appendChild(this.spinnerElement);
+        this.overlayElement.appendChild(container);
+        this.options.container.appendChild(this.overlayElement);
+    }
+    createSpinnerElement() {
+        const { type } = this.options;
+        switch (type) {
+            case 'circle':
+                return this.createCircleSpinner();
+            case 'dots':
+                return this.createDotsSpinner();
+            case 'bars':
+                return this.createBarsSpinner();
+            case 'ring':
+                return this.createRingSpinner();
+            case 'pulse':
+                return this.createPulseSpinner();
+            default:
+                return this.createCircleSpinner();
+        }
+    }
+    createCircleSpinner() {
+        const spinner = document.createElement('div');
+        spinner.className = 'spinner-circle';
+        this.applyStyles(spinner);
+        spinner.style.borderWidth = `${this.options.size / 10}px`;
+        spinner.style.borderTopColor = this.options.color;
+        spinner.style.borderRightColor = 'transparent';
+        spinner.style.borderBottomColor = 'transparent';
+        spinner.style.borderLeftColor = 'transparent';
+        spinner.style.animationDuration = `${this.options.speed}s`;
+        return spinner;
+    }
+    createDotsSpinner() {
+        const spinner = document.createElement('div');
+        spinner.className = 'spinner-dots';
+        for (let i = 0; i < 3; i++) {
+            const dot = document.createElement('div');
+            dot.className = 'dot';
+            dot.style.width = `${this.options.size / 4}px`;
+            dot.style.height = `${this.options.size / 4}px`;
+            dot.style.backgroundColor = this.options.color;
+            dot.style.animationDuration = `${this.options.speed}s`;
+            spinner.appendChild(dot);
+        }
+        return spinner;
+    }
+    createBarsSpinner() {
+        const spinner = document.createElement('div');
+        spinner.className = 'spinner-bars';
+        spinner.style.height = `${this.options.size}px`;
+        for (let i = 0; i < 3; i++) {
+            const bar = document.createElement('div');
+            bar.className = 'bar';
+            bar.style.width = `${this.options.size / 6}px`;
+            bar.style.height = `${this.options.size}px`;
+            bar.style.backgroundColor = this.options.color;
+            bar.style.animationDuration = `${this.options.speed}s`;
+            spinner.appendChild(bar);
+        }
+        return spinner;
+    }
+    createRingSpinner() {
+        const spinner = document.createElement('div');
+        spinner.className = 'spinner-ring';
+        this.applyStyles(spinner);
+        spinner.style.border = `${this.options.size / 10}px solid ${this.options.color}`;
+        spinner.style.animationDuration = `${this.options.speed}s`;
+        const beforeStyle = document.createElement('style');
+        beforeStyle.textContent = `
+      .spinner-ring::before {
+        border-width: ${this.options.size / 10}px;
+        border-top-color: ${this.options.color};
+        border-right-color: ${this.options.color};
+      }
+    `;
+        document.head.appendChild(beforeStyle);
+        return spinner;
+    }
+    createPulseSpinner() {
+        const spinner = document.createElement('div');
+        spinner.className = 'spinner-pulse';
+        this.applyStyles(spinner);
+        spinner.style.backgroundColor = this.options.color;
+        spinner.style.animationDuration = `${this.options.speed}s`;
+        return spinner;
+    }
+    applyStyles(element) {
+        element.style.width = `${this.options.size}px`;
+        element.style.height = `${this.options.size}px`;
+    }
+    /**
+     * Check if spinner is currently visible
+     */
+    isShowing() {
+        return this.isVisible;
+    }
+    /**
+     * Destroy the spinner and clean up
+     */
+    destroy() {
+        this.hide();
+    }
+}
+
+exports.AnimatedSpinner = AnimatedSpinner;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../src/spinner.ts"],"sourcesContent":["import { SpinnerOptions, SpinnerType } from './types';\nimport './styles.css';\n\nexport class AnimatedSpinner {\n    private options: Required<SpinnerOptions>;\n    private overlayElement: HTMLElement | null = null;\n    private spinnerElement: HTMLElement | null = null;\n    private isVisible: boolean = false;\n\n    constructor(options: SpinnerOptions = {}) {\n        this.options = {\n            type: options.type || 'circle',\n            size: options.size || 40,\n            color: options.color || '#3b82f6',\n            speed: options.speed || 1,\n            container: options.container || document.body,\n            overlay: options.overlay !== undefined ? options.overlay : true,\n            overlayColor: options.overlayColor || 'rgba(0, 0, 0, 0.5)',\n            className: options.className || '',\n        };\n    }\n\n    /**\n     * Show the spinner\n     */\n    public show(): void {\n        if (this.isVisible) return;\n\n        this.createSpinner();\n        this.isVisible = true;\n    }\n\n    /**\n     * Hide the spinner\n     */\n    public hide(): void {\n        if (!this.isVisible || !this.overlayElement) return;\n\n        this.overlayElement.classList.add('fade-out');\n\n        setTimeout(() => {\n            if (this.overlayElement && this.overlayElement.parentNode) {\n                this.overlayElement.parentNode.removeChild(this.overlayElement);\n            }\n            this.overlayElement = null;\n            this.spinnerElement = null;\n            this.isVisible = false;\n        }, 300);\n    }\n\n    /**\n     * Update spinner type\n     */\n    public setType(type: SpinnerType): void {\n        this.options.type = type;\n        if (this.isVisible) {\n            this.hide();\n            setTimeout(() => this.show(), 300);\n        }\n    }\n\n    /**\n     * Update spinner color\n     */\n    public setColor(color: string): void {\n        this.options.color = color;\n        if (this.spinnerElement) {\n            this.applyStyles(this.spinnerElement);\n        }\n    }\n\n    /**\n     * Update spinner size\n     */\n    public setSize(size: number): void {\n        this.options.size = size;\n        if (this.spinnerElement) {\n            this.applyStyles(this.spinnerElement);\n        }\n    }\n\n    /**\n     * Update animation speed\n     */\n    public setSpeed(speed: number): void {\n        this.options.speed = speed;\n        if (this.spinnerElement) {\n            this.spinnerElement.style.animationDuration = `${speed}s`;\n        }\n    }\n\n    private createSpinner(): void {\n        // Create overlay\n        this.overlayElement = document.createElement('div');\n        this.overlayElement.className = 'animated-spinner-overlay fade-in';\n\n        if (this.options.overlay) {\n            this.overlayElement.style.backgroundColor = this.options.overlayColor;\n        } else {\n            this.overlayElement.style.backgroundColor = 'transparent';\n            this.overlayElement.style.pointerEvents = 'none';\n        }\n\n        // Create spinner container\n        const container = document.createElement('div');\n        container.className = 'animated-spinner-container';\n        if (this.options.className) {\n            container.classList.add(this.options.className);\n        }\n\n        // Create spinner based on type\n        this.spinnerElement = this.createSpinnerElement();\n        container.appendChild(this.spinnerElement);\n        this.overlayElement.appendChild(container);\n        this.options.container.appendChild(this.overlayElement);\n    }\n\n    private createSpinnerElement(): HTMLElement {\n        const { type } = this.options;\n\n        switch (type) {\n            case 'circle':\n                return this.createCircleSpinner();\n            case 'dots':\n                return this.createDotsSpinner();\n            case 'bars':\n                return this.createBarsSpinner();\n            case 'ring':\n                return this.createRingSpinner();\n            case 'pulse':\n                return this.createPulseSpinner();\n            default:\n                return this.createCircleSpinner();\n        }\n    }\n\n    private createCircleSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-circle';\n        this.applyStyles(spinner);\n        spinner.style.borderWidth = `${this.options.size / 10}px`;\n        spinner.style.borderTopColor = this.options.color;\n        spinner.style.borderRightColor = 'transparent';\n        spinner.style.borderBottomColor = 'transparent';\n        spinner.style.borderLeftColor = 'transparent';\n        spinner.style.animationDuration = `${this.options.speed}s`;\n        return spinner;\n    }\n\n    private createDotsSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-dots';\n\n        for (let i = 0; i < 3; i++) {\n            const dot = document.createElement('div');\n            dot.className = 'dot';\n            dot.style.width = `${this.options.size / 4}px`;\n            dot.style.height = `${this.options.size / 4}px`;\n            dot.style.backgroundColor = this.options.color;\n            dot.style.animationDuration = `${this.options.speed}s`;\n            spinner.appendChild(dot);\n        }\n\n        return spinner;\n    }\n\n    private createBarsSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-bars';\n        spinner.style.height = `${this.options.size}px`;\n\n        for (let i = 0; i < 3; i++) {\n            const bar = document.createElement('div');\n            bar.className = 'bar';\n            bar.style.width = `${this.options.size / 6}px`;\n            bar.style.height = `${this.options.size}px`;\n            bar.style.backgroundColor = this.options.color;\n            bar.style.animationDuration = `${this.options.speed}s`;\n            spinner.appendChild(bar);\n        }\n\n        return spinner;\n    }\n\n    private createRingSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-ring';\n        this.applyStyles(spinner);\n        spinner.style.border = `${this.options.size / 10}px solid ${this.options.color}`;\n        spinner.style.animationDuration = `${this.options.speed}s`;\n\n        const beforeStyle = document.createElement('style');\n        beforeStyle.textContent = `\n      .spinner-ring::before {\n        border-width: ${this.options.size / 10}px;\n        border-top-color: ${this.options.color};\n        border-right-color: ${this.options.color};\n      }\n    `;\n        document.head.appendChild(beforeStyle);\n\n        return spinner;\n    }\n\n    private createPulseSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-pulse';\n        this.applyStyles(spinner);\n        spinner.style.backgroundColor = this.options.color;\n        spinner.style.animationDuration = `${this.options.speed}s`;\n        return spinner;\n    }\n\n    private applyStyles(element: HTMLElement): void {\n        element.style.width = `${this.options.size}px`;\n        element.style.height = `${this.options.size}px`;\n    }\n\n    /**\n     * Check if spinner is currently visible\n     */\n    public isShowing(): boolean {\n        return this.isVisible;\n    }\n\n    /**\n     * Destroy the spinner and clean up\n     */\n    public destroy(): void {\n        this.hide();\n    }\n}\n"],"names":[],"mappings":";;MAGa,eAAe,CAAA;AAMxB,IAAA,WAAA,CAAY,UAA0B,EAAE,EAAA;QAJhC,IAAA,CAAA,cAAc,GAAuB,IAAI;QACzC,IAAA,CAAA,cAAc,GAAuB,IAAI;QACzC,IAAA,CAAA,SAAS,GAAY,KAAK;QAG9B,IAAI,CAAC,OAAO,GAAG;AACX,YAAA,IAAI,EAAE,OAAO,CAAC,IAAI,IAAI,QAAQ;AAC9B,YAAA,IAAI,EAAE,OAAO,CAAC,IAAI,IAAI,EAAE;AACxB,YAAA,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,SAAS;AACjC,YAAA,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;AACzB,YAAA,SAAS,EAAE,OAAO,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI;AAC7C,YAAA,OAAO,EAAE,OAAO,CAAC,OAAO,KAAK,SAAS,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI;AAC/D,YAAA,YAAY,EAAE,OAAO,CAAC,YAAY,IAAI,oBAAoB;AAC1D,YAAA,SAAS,EAAE,OAAO,CAAC,SAAS,IAAI,EAAE;SACrC;IACL;AAEA;;AAEG;IACI,IAAI,GAAA;QACP,IAAI,IAAI,CAAC,SAAS;YAAE;QAEpB,IAAI,CAAC,aAAa,EAAE;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;IACzB;AAEA;;AAEG;IACI,IAAI,GAAA;QACP,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE;QAE7C,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;QAE7C,UAAU,CAAC,MAAK;YACZ,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;gBACvD,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC;YACnE;AACA,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAC1B,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAC1B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;QAC1B,CAAC,EAAE,GAAG,CAAC;IACX;AAEA;;AAEG;AACI,IAAA,OAAO,CAAC,IAAiB,EAAA;AAC5B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI;AACxB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,IAAI,EAAE;YACX,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC;QACtC;IACJ;AAEA;;AAEG;AACI,IAAA,QAAQ,CAAC,KAAa,EAAA;AACzB,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK;AAC1B,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACrB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC;QACzC;IACJ;AAEA;;AAEG;AACI,IAAA,OAAO,CAAC,IAAY,EAAA;AACvB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI;AACxB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACrB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC;QACzC;IACJ;AAEA;;AAEG;AACI,IAAA,QAAQ,CAAC,KAAa,EAAA;AACzB,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK;AAC1B,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,GAAG,CAAA,EAAG,KAAK,CAAA,CAAA,CAAG;QAC7D;IACJ;IAEQ,aAAa,GAAA;;QAEjB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACnD,QAAA,IAAI,CAAC,cAAc,CAAC,SAAS,GAAG,kCAAkC;AAElE,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;AACtB,YAAA,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY;QACzE;aAAO;YACH,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa;YACzD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM;QACpD;;QAGA,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC/C,QAAA,SAAS,CAAC,SAAS,GAAG,4BAA4B;AAClD,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;YACxB,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;QACnD;;AAGA,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,oBAAoB,EAAE;AACjD,QAAA,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC;AAC1C,QAAA,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC;QAC1C,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC;IAC3D;IAEQ,oBAAoB,GAAA;AACxB,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO;QAE7B,QAAQ,IAAI;AACR,YAAA,KAAK,QAAQ;AACT,gBAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE;AACrC,YAAA,KAAK,MAAM;AACP,gBAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE;AACnC,YAAA,KAAK,MAAM;AACP,gBAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE;AACnC,YAAA,KAAK,MAAM;AACP,gBAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE;AACnC,YAAA,KAAK,OAAO;AACR,gBAAA,OAAO,IAAI,CAAC,kBAAkB,EAAE;AACpC,YAAA;AACI,gBAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE;;IAE7C;IAEQ,mBAAmB,GAAA;QACvB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,OAAO,CAAC,SAAS,GAAG,gBAAgB;AACpC,QAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;AACzB,QAAA,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,EAAE,IAAI;QACzD,OAAO,CAAC,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK;AACjD,QAAA,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,aAAa;AAC9C,QAAA,OAAO,CAAC,KAAK,CAAC,iBAAiB,GAAG,aAAa;AAC/C,QAAA,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa;AAC7C,QAAA,OAAO,CAAC,KAAK,CAAC,iBAAiB,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAA,CAAA,CAAG;AAC1D,QAAA,OAAO,OAAO;IAClB;IAEQ,iBAAiB,GAAA;QACrB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,OAAO,CAAC,SAAS,GAAG,cAAc;AAElC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;YACxB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACzC,YAAA,GAAG,CAAC,SAAS,GAAG,KAAK;AACrB,YAAA,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,IAAI;AAC9C,YAAA,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,IAAI;YAC/C,GAAG,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK;AAC9C,YAAA,GAAG,CAAC,KAAK,CAAC,iBAAiB,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAA,CAAA,CAAG;AACtD,YAAA,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC;QAC5B;AAEA,QAAA,OAAO,OAAO;IAClB;IAEQ,iBAAiB,GAAA;QACrB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,OAAO,CAAC,SAAS,GAAG,cAAc;AAClC,QAAA,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAA,EAAA,CAAI;AAE/C,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;YACxB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACzC,YAAA,GAAG,CAAC,SAAS,GAAG,KAAK;AACrB,YAAA,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,IAAI;AAC9C,YAAA,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAA,EAAA,CAAI;YAC3C,GAAG,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK;AAC9C,YAAA,GAAG,CAAC,KAAK,CAAC,iBAAiB,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAA,CAAA,CAAG;AACtD,YAAA,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC;QAC5B;AAEA,QAAA,OAAO,OAAO;IAClB;IAEQ,iBAAiB,GAAA;QACrB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,OAAO,CAAC,SAAS,GAAG,cAAc;AAClC,QAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;QACzB,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,EAAE,YAAY,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;AAChF,QAAA,OAAO,CAAC,KAAK,CAAC,iBAAiB,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAA,CAAA,CAAG;QAE1D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;QACnD,WAAW,CAAC,WAAW,GAAG;;AAEV,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA;4BAClB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAA;8BAChB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAA;;KAE3C;AACG,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;AAEtC,QAAA,OAAO,OAAO;IAClB;IAEQ,kBAAkB,GAAA;QACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,QAAA,OAAO,CAAC,SAAS,GAAG,eAAe;AACnC,QAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;QACzB,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK;AAClD,QAAA,OAAO,CAAC,KAAK,CAAC,iBAAiB,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAA,CAAA,CAAG;AAC1D,QAAA,OAAO,OAAO;IAClB;AAEQ,IAAA,WAAW,CAAC,OAAoB,EAAA;AACpC,QAAA,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAA,EAAA,CAAI;AAC9C,QAAA,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,CAAA,EAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAA,EAAA,CAAI;IACnD;AAEA;;AAEG;IACI,SAAS,GAAA;QACZ,OAAO,IAAI,CAAC,SAAS;IACzB;AAEA;;AAEG;IACI,OAAO,GAAA;QACV,IAAI,CAAC,IAAI,EAAE;IACf;AACH;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { AnimatedSpinner } from './spinner';
+export type { SpinnerOptions, SpinnerType } from './types';

package/dist/index.esm.css

@@ -0,0 +1,2 @@
+.animated-spinner-overlay{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;transition:opacity .3s ease;width:100%;z-index:9999}.animated-spinner-container{display:inline-block;position:relative}.spinner-circle{animation:spinner-rotate 1s linear infinite;border-radius:50%;border-style:solid}@keyframes spinner-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.spinner-dots{align-items:center;display:flex;gap:8px}.spinner-dots .dot{animation:spinner-pulse 1.4s ease-in-out infinite;border-radius:50%}.spinner-dots .dot:first-child{animation-delay:-.32s}.spinner-dots .dot:nth-child(2){animation-delay:-.16s}@keyframes spinner-pulse{0%,80%,to{opacity:.5;transform:scale(0)}40%{opacity:1;transform:scale(1)}}.spinner-bars{align-items:center;display:flex;gap:4px}.spinner-bars .bar{animation:spinner-bounce 1.2s ease-in-out infinite;border-radius:2px}.spinner-bars .bar:first-child{animation-delay:-.32s}.spinner-bars .bar:nth-child(2){animation-delay:-.16s}@keyframes spinner-bounce{0%,80%,to{transform:scaleY(.4)}40%{transform:scaleY(1)}}.spinner-ring{animation:spinner-rotate 1s linear infinite;border-radius:50%;position:relative}.spinner-ring:before{animation:spinner-ring-pulse 1s ease-in-out infinite;border-color:transparent;border-radius:50%;border-style:solid;bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes spinner-ring-pulse{0%{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.2)}}.spinner-pulse{animation:spinner-pulse-grow 1s ease-in-out infinite;border-radius:50%}@keyframes spinner-pulse-grow{0%,to{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}.animated-spinner-overlay.fade-in{animation:fadeIn .3s ease}.animated-spinner-overlay.fade-out{animation:fadeOut .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}
+/*# sourceMappingURL=index.esm.css.map */

package/dist/index.esm.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["styles.css"],"names":[],"mappings":"AACA,0BAOE,kBAAmB,CADnB,YAAa,CADb,WAAY,CAGZ,sBAAuB,CALvB,MAAO,CAFP,cAAe,CACf,KAAM,CAQN,2BAA6B,CAN7B,UAAW,CAKX,YAEF,CAEA,4BACE,oBAAqB,CACrB,iBACF,CAGA,gBAGE,2CAA4C,CAF5C,iBAAkB,CAClB,kBAEF,CAEA,0BACE,GACE,sBACF,CACA,GACE,uBACF,CACF,CAGA,cAGE,kBAAmB,CAFnB,YAAa,CACb,OAEF,CAEA,mBAEE,iDAAkD,CADlD,iBAEF,CAEA,+BACE,qBACF,CAEA,gCACE,qBACF,CAEA,yBACE,UAEE,UAAY,CADZ,kBAEF,CACA,IAEE,SAAU,CADV,kBAEF,CACF,CAGA,cAGE,kBAAmB,CAFnB,YAAa,CACb,OAEF,CAEA,mBAEE,kDAAmD,CADnD,iBAEF,CAEA,+BACE,qBACF,CAEA,gCACE,qBACF,CAEA,0BACE,UACE,oBACF,CACA,IACE,mBACF,CACF,CAGA,cAGE,2CAA4C,CAF5C,iBAAkB,CAClB,iBAEF,CAEA,qBAUE,oDAAqD,CADrD,wBAAyB,CAFzB,iBAAkB,CAClB,kBAAmB,CAFnB,QAAS,CALT,UAAW,CAGX,MAAO,CAFP,iBAAkB,CAGlB,OAAQ,CAFR,KAQF,CAEA,8BACE,GAEE,SAAU,CADV,mBAEF,CACA,GAEE,SAAU,CADV,oBAEF,CACF,CAGA,eAEE,oDAAqD,CADrD,iBAEF,CAEA,8BACE,MAEE,UAAY,CADZ,mBAEF,CACA,IAEE,SAAU,CADV,kBAEF,CACF,CAGA,kCACE,yBACF,CAEA,mCACE,0BACF,CAEA,kBACE,GACE,SACF,CACA,GACE,SACF,CACF,CAEA,mBACE,GACE,SACF,CACA,GACE,SACF,CACF","file":"index.esm.css","sourcesContent":["/* Spinner Container */\n.animated-spinner-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  transition: opacity 0.3s ease;\n}\n\n.animated-spinner-container {\n  display: inline-block;\n  position: relative;\n}\n\n/* Circle Spinner */\n.spinner-circle {\n  border-radius: 50%;\n  border-style: solid;\n  animation: spinner-rotate 1s linear infinite;\n}\n\n@keyframes spinner-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n/* Dots Spinner */\n.spinner-dots {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.spinner-dots .dot {\n  border-radius: 50%;\n  animation: spinner-pulse 1.4s ease-in-out infinite;\n}\n\n.spinner-dots .dot:nth-child(1) {\n  animation-delay: -0.32s;\n}\n\n.spinner-dots .dot:nth-child(2) {\n  animation-delay: -0.16s;\n}\n\n@keyframes spinner-pulse {\n  0%, 80%, 100% {\n    transform: scale(0);\n    opacity: 0.5;\n  }\n  40% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* Bars Spinner */\n.spinner-bars {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.spinner-bars .bar {\n  border-radius: 2px;\n  animation: spinner-bounce 1.2s ease-in-out infinite;\n}\n\n.spinner-bars .bar:nth-child(1) {\n  animation-delay: -0.32s;\n}\n\n.spinner-bars .bar:nth-child(2) {\n  animation-delay: -0.16s;\n}\n\n@keyframes spinner-bounce {\n  0%, 80%, 100% {\n    transform: scaleY(0.4);\n  }\n  40% {\n    transform: scaleY(1);\n  }\n}\n\n/* Ring Spinner */\n.spinner-ring {\n  border-radius: 50%;\n  position: relative;\n  animation: spinner-rotate 1s linear infinite;\n}\n\n.spinner-ring::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 50%;\n  border-style: solid;\n  border-color: transparent;\n  animation: spinner-ring-pulse 1s ease-in-out infinite;\n}\n\n@keyframes spinner-ring-pulse {\n  0% {\n    transform: scale(0.8);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1.2);\n    opacity: 0;\n  }\n}\n\n/* Pulse Spinner */\n.spinner-pulse {\n  border-radius: 50%;\n  animation: spinner-pulse-grow 1s ease-in-out infinite;\n}\n\n@keyframes spinner-pulse-grow {\n  0%, 100% {\n    transform: scale(0.8);\n    opacity: 0.5;\n  }\n  50% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* Fade animations */\n.animated-spinner-overlay.fade-in {\n  animation: fadeIn 0.3s ease;\n}\n\n.animated-spinner-overlay.fade-out {\n  animation: fadeOut 0.3s ease;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n"]}

package/dist/index.esm.js

@@ -0,0 +1,204 @@
+class AnimatedSpinner {
+    constructor(options = {}) {
+        this.overlayElement = null;
+        this.spinnerElement = null;
+        this.isVisible = false;
+        this.options = {
+            type: options.type || 'circle',
+            size: options.size || 40,
+            color: options.color || '#3b82f6',
+            speed: options.speed || 1,
+            container: options.container || document.body,
+            overlay: options.overlay !== undefined ? options.overlay : true,
+            overlayColor: options.overlayColor || 'rgba(0, 0, 0, 0.5)',
+            className: options.className || '',
+        };
+    }
+    /**
+     * Show the spinner
+     */
+    show() {
+        if (this.isVisible)
+            return;
+        this.createSpinner();
+        this.isVisible = true;
+    }
+    /**
+     * Hide the spinner
+     */
+    hide() {
+        if (!this.isVisible || !this.overlayElement)
+            return;
+        this.overlayElement.classList.add('fade-out');
+        setTimeout(() => {
+            if (this.overlayElement && this.overlayElement.parentNode) {
+                this.overlayElement.parentNode.removeChild(this.overlayElement);
+            }
+            this.overlayElement = null;
+            this.spinnerElement = null;
+            this.isVisible = false;
+        }, 300);
+    }
+    /**
+     * Update spinner type
+     */
+    setType(type) {
+        this.options.type = type;
+        if (this.isVisible) {
+            this.hide();
+            setTimeout(() => this.show(), 300);
+        }
+    }
+    /**
+     * Update spinner color
+     */
+    setColor(color) {
+        this.options.color = color;
+        if (this.spinnerElement) {
+            this.applyStyles(this.spinnerElement);
+        }
+    }
+    /**
+     * Update spinner size
+     */
+    setSize(size) {
+        this.options.size = size;
+        if (this.spinnerElement) {
+            this.applyStyles(this.spinnerElement);
+        }
+    }
+    /**
+     * Update animation speed
+     */
+    setSpeed(speed) {
+        this.options.speed = speed;
+        if (this.spinnerElement) {
+            this.spinnerElement.style.animationDuration = `${speed}s`;
+        }
+    }
+    createSpinner() {
+        // Create overlay
+        this.overlayElement = document.createElement('div');
+        this.overlayElement.className = 'animated-spinner-overlay fade-in';
+        if (this.options.overlay) {
+            this.overlayElement.style.backgroundColor = this.options.overlayColor;
+        }
+        else {
+            this.overlayElement.style.backgroundColor = 'transparent';
+            this.overlayElement.style.pointerEvents = 'none';
+        }
+        // Create spinner container
+        const container = document.createElement('div');
+        container.className = 'animated-spinner-container';
+        if (this.options.className) {
+            container.classList.add(this.options.className);
+        }
+        // Create spinner based on type
+        this.spinnerElement = this.createSpinnerElement();
+        container.appendChild(this.spinnerElement);
+        this.overlayElement.appendChild(container);
+        this.options.container.appendChild(this.overlayElement);
+    }
+    createSpinnerElement() {
+        const { type } = this.options;
+        switch (type) {
+            case 'circle':
+                return this.createCircleSpinner();
+            case 'dots':
+                return this.createDotsSpinner();
+            case 'bars':
+                return this.createBarsSpinner();
+            case 'ring':
+                return this.createRingSpinner();
+            case 'pulse':
+                return this.createPulseSpinner();
+            default:
+                return this.createCircleSpinner();
+        }
+    }
+    createCircleSpinner() {
+        const spinner = document.createElement('div');
+        spinner.className = 'spinner-circle';
+        this.applyStyles(spinner);
+        spinner.style.borderWidth = `${this.options.size / 10}px`;
+        spinner.style.borderTopColor = this.options.color;
+        spinner.style.borderRightColor = 'transparent';
+        spinner.style.borderBottomColor = 'transparent';
+        spinner.style.borderLeftColor = 'transparent';
+        spinner.style.animationDuration = `${this.options.speed}s`;
+        return spinner;
+    }
+    createDotsSpinner() {
+        const spinner = document.createElement('div');
+        spinner.className = 'spinner-dots';
+        for (let i = 0; i < 3; i++) {
+            const dot = document.createElement('div');
+            dot.className = 'dot';
+            dot.style.width = `${this.options.size / 4}px`;
+            dot.style.height = `${this.options.size / 4}px`;
+            dot.style.backgroundColor = this.options.color;
+            dot.style.animationDuration = `${this.options.speed}s`;
+            spinner.appendChild(dot);
+        }
+        return spinner;
+    }
+    createBarsSpinner() {
+        const spinner = document.createElement('div');
+        spinner.className = 'spinner-bars';
+        spinner.style.height = `${this.options.size}px`;
+        for (let i = 0; i < 3; i++) {
+            const bar = document.createElement('div');
+            bar.className = 'bar';
+            bar.style.width = `${this.options.size / 6}px`;
+            bar.style.height = `${this.options.size}px`;
+            bar.style.backgroundColor = this.options.color;
+            bar.style.animationDuration = `${this.options.speed}s`;
+            spinner.appendChild(bar);
+        }
+        return spinner;
+    }
+    createRingSpinner() {
+        const spinner = document.createElement('div');
+        spinner.className = 'spinner-ring';
+        this.applyStyles(spinner);
+        spinner.style.border = `${this.options.size / 10}px solid ${this.options.color}`;
+        spinner.style.animationDuration = `${this.options.speed}s`;
+        const beforeStyle = document.createElement('style');
+        beforeStyle.textContent = `
+      .spinner-ring::before {
+        border-width: ${this.options.size / 10}px;
+        border-top-color: ${this.options.color};
+        border-right-color: ${this.options.color};
+      }
+    `;
+        document.head.appendChild(beforeStyle);
+        return spinner;
+    }
+    createPulseSpinner() {
+        const spinner = document.createElement('div');
+        spinner.className = 'spinner-pulse';
+        this.applyStyles(spinner);
+        spinner.style.backgroundColor = this.options.color;
+        spinner.style.animationDuration = `${this.options.speed}s`;
+        return spinner;
+    }
+    applyStyles(element) {
+        element.style.width = `${this.options.size}px`;
+        element.style.height = `${this.options.size}px`;
+    }
+    /**
+     * Check if spinner is currently visible
+     */
+    isShowing() {
+        return this.isVisible;
+    }
+    /**
+     * Destroy the spinner and clean up
+     */
+    destroy() {
+        this.hide();
+    }
+}
+
+export { AnimatedSpinner };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/spinner.ts"],"sourcesContent":["import { SpinnerOptions, SpinnerType } from './types';\nimport './styles.css';\n\nexport class AnimatedSpinner {\n    private options: Required<SpinnerOptions>;\n    private overlayElement: HTMLElement | null = null;\n    private spinnerElement: HTMLElement | null = null;\n    private isVisible: boolean = false;\n\n    constructor(options: SpinnerOptions = {}) {\n        this.options = {\n            type: options.type || 'circle',\n            size: options.size || 40,\n            color: options.color || '#3b82f6',\n            speed: options.speed || 1,\n            container: options.container || document.body,\n            overlay: options.overlay !== undefined ? options.overlay : true,\n            overlayColor: options.overlayColor || 'rgba(0, 0, 0, 0.5)',\n            className: options.className || '',\n        };\n    }\n\n    /**\n     * Show the spinner\n     */\n    public show(): void {\n        if (this.isVisible) return;\n\n        this.createSpinner();\n        this.isVisible = true;\n    }\n\n    /**\n     * Hide the spinner\n     */\n    public hide(): void {\n        if (!this.isVisible || !this.overlayElement) return;\n\n        this.overlayElement.classList.add('fade-out');\n\n        setTimeout(() => {\n            if (this.overlayElement && this.overlayElement.parentNode) {\n                this.overlayElement.parentNode.removeChild(this.overlayElement);\n            }\n            this.overlayElement = null;\n            this.spinnerElement = null;\n            this.isVisible = false;\n        }, 300);\n    }\n\n    /**\n     * Update spinner type\n     */\n    public setType(type: SpinnerType): void {\n        this.options.type = type;\n        if (this.isVisible) {\n            this.hide();\n            setTimeout(() => this.show(), 300);\n        }\n    }\n\n    /**\n     * Update spinner color\n     */\n    public setColor(color: string): void {\n        this.options.color = color;\n        if (this.spinnerElement) {\n            this.applyStyles(this.spinnerElement);\n        }\n    }\n\n    /**\n     * Update spinner size\n     */\n    public setSize(size: number): void {\n        this.options.size = size;\n        if (this.spinnerElement) {\n            this.applyStyles(this.spinnerElement);\n        }\n    }\n\n    /**\n     * Update animation speed\n     */\n    public setSpeed(speed: number): void {\n        this.options.speed = speed;\n        if (this.spinnerElement) {\n            this.spinnerElement.style.animationDuration = `${speed}s`;\n        }\n    }\n\n    private createSpinner(): void {\n        // Create overlay\n        this.overlayElement = document.createElement('div');\n        this.overlayElement.className = 'animated-spinner-overlay fade-in';\n\n        if (this.options.overlay) {\n            this.overlayElement.style.backgroundColor = this.options.overlayColor;\n        } else {\n            this.overlayElement.style.backgroundColor = 'transparent';\n            this.overlayElement.style.pointerEvents = 'none';\n        }\n\n        // Create spinner container\n        const container = document.createElement('div');\n        container.className = 'animated-spinner-container';\n        if (this.options.className) {\n            container.classList.add(this.options.className);\n        }\n\n        // Create spinner based on type\n        this.spinnerElement = this.createSpinnerElement();\n        container.appendChild(this.spinnerElement);\n        this.overlayElement.appendChild(container);\n        this.options.container.appendChild(this.overlayElement);\n    }\n\n    private createSpinnerElement(): HTMLElement {\n        const { type } = this.options;\n\n        switch (type) {\n            case 'circle':\n                return this.createCircleSpinner();\n            case 'dots':\n                return this.createDotsSpinner();\n            case 'bars':\n                return this.createBarsSpinner();\n            case 'ring':\n                return this.createRingSpinner();\n            case 'pulse':\n                return this.createPulseSpinner();\n            default:\n                return this.createCircleSpinner();\n        }\n    }\n\n    private createCircleSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-circle';\n        this.applyStyles(spinner);\n        spinner.style.borderWidth = `${this.options.size / 10}px`;\n        spinner.style.borderTopColor = this.options.color;\n        spinner.style.borderRightColor = 'transparent';\n        spinner.style.borderBottomColor = 'transparent';\n        spinner.style.borderLeftColor = 'transparent';\n        spinner.style.animationDuration = `${this.options.speed}s`;\n        return spinner;\n    }\n\n    private createDotsSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-dots';\n\n        for (let i = 0; i < 3; i++) {\n            const dot = document.createElement('div');\n            dot.className = 'dot';\n            dot.style.width = `${this.options.size / 4}px`;\n            dot.style.height = `${this.options.size / 4}px`;\n            dot.style.backgroundColor = this.options.color;\n            dot.style.animationDuration = `${this.options.speed}s`;\n            spinner.appendChild(dot);\n        }\n\n        return spinner;\n    }\n\n    private createBarsSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-bars';\n        spinner.style.height = `${this.options.size}px`;\n\n        for (let i = 0; i < 3; i++) {\n            const bar = document.createElement('div');\n            bar.className = 'bar';\n            bar.style.width = `${this.options.size / 6}px`;\n            bar.style.height = `${this.options.size}px`;\n            bar.style.backgroundColor = this.options.color;\n            bar.style.animationDuration = `${this.options.speed}s`;\n            spinner.appendChild(bar);\n        }\n\n        return spinner;\n    }\n\n    private createRingSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-ring';\n        this.applyStyles(spinner);\n        spinner.style.border = `${this.options.size / 10}px solid ${this.options.color}`;\n        spinner.style.animationDuration = `${this.options.speed}s`;\n\n        const beforeStyle = document.createElement('style');\n        beforeStyle.textContent = `\n      .spinner-ring::before {\n        border-width: ${this.options.size / 10}px;\n        border-top-color: ${this.options.color};\n        border-right-color: ${this.options.color};\n      }\n    `;\n        document.head.appendChild(beforeStyle);\n\n        return spinner;\n    }\n\n    private createPulseSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-pulse';\n        this.applyStyles(spinner);\n        spinner.style.backgroundColor = this.options.color;\n        spinner.style.animationDuration = `${this.options.speed}s`;\n        return spinner;\n    }\n\n    private applyStyles(element: HTMLElement): void {\n        element.style.width = `${this.options.size}px`;\n        element.style.height = `${this.options.size}px`;\n    }\n\n    /**\n     * Check if spinner is currently visible\n     */\n    public isShowing(): boolean {\n        return this.isVisible;\n    }\n\n    /**\n     * Destroy the spinner and clean up\n     */\n    public destroy(): void {\n        this.hide();\n    }\n}\n"],"names":[],"mappings":"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"}

package/dist/index.umd.css

@@ -0,0 +1,2 @@
+.animated-spinner-overlay{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;transition:opacity .3s ease;width:100%;z-index:9999}.animated-spinner-container{display:inline-block;position:relative}.spinner-circle{animation:spinner-rotate 1s linear infinite;border-radius:50%;border-style:solid}@keyframes spinner-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.spinner-dots{align-items:center;display:flex;gap:8px}.spinner-dots .dot{animation:spinner-pulse 1.4s ease-in-out infinite;border-radius:50%}.spinner-dots .dot:first-child{animation-delay:-.32s}.spinner-dots .dot:nth-child(2){animation-delay:-.16s}@keyframes spinner-pulse{0%,80%,to{opacity:.5;transform:scale(0)}40%{opacity:1;transform:scale(1)}}.spinner-bars{align-items:center;display:flex;gap:4px}.spinner-bars .bar{animation:spinner-bounce 1.2s ease-in-out infinite;border-radius:2px}.spinner-bars .bar:first-child{animation-delay:-.32s}.spinner-bars .bar:nth-child(2){animation-delay:-.16s}@keyframes spinner-bounce{0%,80%,to{transform:scaleY(.4)}40%{transform:scaleY(1)}}.spinner-ring{animation:spinner-rotate 1s linear infinite;border-radius:50%;position:relative}.spinner-ring:before{animation:spinner-ring-pulse 1s ease-in-out infinite;border-color:transparent;border-radius:50%;border-style:solid;bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes spinner-ring-pulse{0%{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.2)}}.spinner-pulse{animation:spinner-pulse-grow 1s ease-in-out infinite;border-radius:50%}@keyframes spinner-pulse-grow{0%,to{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}.animated-spinner-overlay.fade-in{animation:fadeIn .3s ease}.animated-spinner-overlay.fade-out{animation:fadeOut .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}
+/*# sourceMappingURL=index.umd.css.map */

package/dist/index.umd.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["styles.css"],"names":[],"mappings":"AACA,0BAOE,kBAAmB,CADnB,YAAa,CADb,WAAY,CAGZ,sBAAuB,CALvB,MAAO,CAFP,cAAe,CACf,KAAM,CAQN,2BAA6B,CAN7B,UAAW,CAKX,YAEF,CAEA,4BACE,oBAAqB,CACrB,iBACF,CAGA,gBAGE,2CAA4C,CAF5C,iBAAkB,CAClB,kBAEF,CAEA,0BACE,GACE,sBACF,CACA,GACE,uBACF,CACF,CAGA,cAGE,kBAAmB,CAFnB,YAAa,CACb,OAEF,CAEA,mBAEE,iDAAkD,CADlD,iBAEF,CAEA,+BACE,qBACF,CAEA,gCACE,qBACF,CAEA,yBACE,UAEE,UAAY,CADZ,kBAEF,CACA,IAEE,SAAU,CADV,kBAEF,CACF,CAGA,cAGE,kBAAmB,CAFnB,YAAa,CACb,OAEF,CAEA,mBAEE,kDAAmD,CADnD,iBAEF,CAEA,+BACE,qBACF,CAEA,gCACE,qBACF,CAEA,0BACE,UACE,oBACF,CACA,IACE,mBACF,CACF,CAGA,cAGE,2CAA4C,CAF5C,iBAAkB,CAClB,iBAEF,CAEA,qBAUE,oDAAqD,CADrD,wBAAyB,CAFzB,iBAAkB,CAClB,kBAAmB,CAFnB,QAAS,CALT,UAAW,CAGX,MAAO,CAFP,iBAAkB,CAGlB,OAAQ,CAFR,KAQF,CAEA,8BACE,GAEE,SAAU,CADV,mBAEF,CACA,GAEE,SAAU,CADV,oBAEF,CACF,CAGA,eAEE,oDAAqD,CADrD,iBAEF,CAEA,8BACE,MAEE,UAAY,CADZ,mBAEF,CACA,IAEE,SAAU,CADV,kBAEF,CACF,CAGA,kCACE,yBACF,CAEA,mCACE,0BACF,CAEA,kBACE,GACE,SACF,CACA,GACE,SACF,CACF,CAEA,mBACE,GACE,SACF,CACA,GACE,SACF,CACF","file":"index.umd.css","sourcesContent":["/* Spinner Container */\n.animated-spinner-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  transition: opacity 0.3s ease;\n}\n\n.animated-spinner-container {\n  display: inline-block;\n  position: relative;\n}\n\n/* Circle Spinner */\n.spinner-circle {\n  border-radius: 50%;\n  border-style: solid;\n  animation: spinner-rotate 1s linear infinite;\n}\n\n@keyframes spinner-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n/* Dots Spinner */\n.spinner-dots {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.spinner-dots .dot {\n  border-radius: 50%;\n  animation: spinner-pulse 1.4s ease-in-out infinite;\n}\n\n.spinner-dots .dot:nth-child(1) {\n  animation-delay: -0.32s;\n}\n\n.spinner-dots .dot:nth-child(2) {\n  animation-delay: -0.16s;\n}\n\n@keyframes spinner-pulse {\n  0%, 80%, 100% {\n    transform: scale(0);\n    opacity: 0.5;\n  }\n  40% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* Bars Spinner */\n.spinner-bars {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.spinner-bars .bar {\n  border-radius: 2px;\n  animation: spinner-bounce 1.2s ease-in-out infinite;\n}\n\n.spinner-bars .bar:nth-child(1) {\n  animation-delay: -0.32s;\n}\n\n.spinner-bars .bar:nth-child(2) {\n  animation-delay: -0.16s;\n}\n\n@keyframes spinner-bounce {\n  0%, 80%, 100% {\n    transform: scaleY(0.4);\n  }\n  40% {\n    transform: scaleY(1);\n  }\n}\n\n/* Ring Spinner */\n.spinner-ring {\n  border-radius: 50%;\n  position: relative;\n  animation: spinner-rotate 1s linear infinite;\n}\n\n.spinner-ring::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 50%;\n  border-style: solid;\n  border-color: transparent;\n  animation: spinner-ring-pulse 1s ease-in-out infinite;\n}\n\n@keyframes spinner-ring-pulse {\n  0% {\n    transform: scale(0.8);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1.2);\n    opacity: 0;\n  }\n}\n\n/* Pulse Spinner */\n.spinner-pulse {\n  border-radius: 50%;\n  animation: spinner-pulse-grow 1s ease-in-out infinite;\n}\n\n@keyframes spinner-pulse-grow {\n  0%, 100% {\n    transform: scale(0.8);\n    opacity: 0.5;\n  }\n  50% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n/* Fade animations */\n.animated-spinner-overlay.fade-in {\n  animation: fadeIn 0.3s ease;\n}\n\n.animated-spinner-overlay.fade-out {\n  animation: fadeOut 0.3s ease;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n"]}

package/dist/index.umd.js

@@ -0,0 +1,212 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.AnimatedSpinner = {}));
+})(this, (function (exports) { 'use strict';
+
+    class AnimatedSpinner {
+        constructor(options = {}) {
+            this.overlayElement = null;
+            this.spinnerElement = null;
+            this.isVisible = false;
+            this.options = {
+                type: options.type || 'circle',
+                size: options.size || 40,
+                color: options.color || '#3b82f6',
+                speed: options.speed || 1,
+                container: options.container || document.body,
+                overlay: options.overlay !== undefined ? options.overlay : true,
+                overlayColor: options.overlayColor || 'rgba(0, 0, 0, 0.5)',
+                className: options.className || '',
+            };
+        }
+        /**
+         * Show the spinner
+         */
+        show() {
+            if (this.isVisible)
+                return;
+            this.createSpinner();
+            this.isVisible = true;
+        }
+        /**
+         * Hide the spinner
+         */
+        hide() {
+            if (!this.isVisible || !this.overlayElement)
+                return;
+            this.overlayElement.classList.add('fade-out');
+            setTimeout(() => {
+                if (this.overlayElement && this.overlayElement.parentNode) {
+                    this.overlayElement.parentNode.removeChild(this.overlayElement);
+                }
+                this.overlayElement = null;
+                this.spinnerElement = null;
+                this.isVisible = false;
+            }, 300);
+        }
+        /**
+         * Update spinner type
+         */
+        setType(type) {
+            this.options.type = type;
+            if (this.isVisible) {
+                this.hide();
+                setTimeout(() => this.show(), 300);
+            }
+        }
+        /**
+         * Update spinner color
+         */
+        setColor(color) {
+            this.options.color = color;
+            if (this.spinnerElement) {
+                this.applyStyles(this.spinnerElement);
+            }
+        }
+        /**
+         * Update spinner size
+         */
+        setSize(size) {
+            this.options.size = size;
+            if (this.spinnerElement) {
+                this.applyStyles(this.spinnerElement);
+            }
+        }
+        /**
+         * Update animation speed
+         */
+        setSpeed(speed) {
+            this.options.speed = speed;
+            if (this.spinnerElement) {
+                this.spinnerElement.style.animationDuration = `${speed}s`;
+            }
+        }
+        createSpinner() {
+            // Create overlay
+            this.overlayElement = document.createElement('div');
+            this.overlayElement.className = 'animated-spinner-overlay fade-in';
+            if (this.options.overlay) {
+                this.overlayElement.style.backgroundColor = this.options.overlayColor;
+            }
+            else {
+                this.overlayElement.style.backgroundColor = 'transparent';
+                this.overlayElement.style.pointerEvents = 'none';
+            }
+            // Create spinner container
+            const container = document.createElement('div');
+            container.className = 'animated-spinner-container';
+            if (this.options.className) {
+                container.classList.add(this.options.className);
+            }
+            // Create spinner based on type
+            this.spinnerElement = this.createSpinnerElement();
+            container.appendChild(this.spinnerElement);
+            this.overlayElement.appendChild(container);
+            this.options.container.appendChild(this.overlayElement);
+        }
+        createSpinnerElement() {
+            const { type } = this.options;
+            switch (type) {
+                case 'circle':
+                    return this.createCircleSpinner();
+                case 'dots':
+                    return this.createDotsSpinner();
+                case 'bars':
+                    return this.createBarsSpinner();
+                case 'ring':
+                    return this.createRingSpinner();
+                case 'pulse':
+                    return this.createPulseSpinner();
+                default:
+                    return this.createCircleSpinner();
+            }
+        }
+        createCircleSpinner() {
+            const spinner = document.createElement('div');
+            spinner.className = 'spinner-circle';
+            this.applyStyles(spinner);
+            spinner.style.borderWidth = `${this.options.size / 10}px`;
+            spinner.style.borderTopColor = this.options.color;
+            spinner.style.borderRightColor = 'transparent';
+            spinner.style.borderBottomColor = 'transparent';
+            spinner.style.borderLeftColor = 'transparent';
+            spinner.style.animationDuration = `${this.options.speed}s`;
+            return spinner;
+        }
+        createDotsSpinner() {
+            const spinner = document.createElement('div');
+            spinner.className = 'spinner-dots';
+            for (let i = 0; i < 3; i++) {
+                const dot = document.createElement('div');
+                dot.className = 'dot';
+                dot.style.width = `${this.options.size / 4}px`;
+                dot.style.height = `${this.options.size / 4}px`;
+                dot.style.backgroundColor = this.options.color;
+                dot.style.animationDuration = `${this.options.speed}s`;
+                spinner.appendChild(dot);
+            }
+            return spinner;
+        }
+        createBarsSpinner() {
+            const spinner = document.createElement('div');
+            spinner.className = 'spinner-bars';
+            spinner.style.height = `${this.options.size}px`;
+            for (let i = 0; i < 3; i++) {
+                const bar = document.createElement('div');
+                bar.className = 'bar';
+                bar.style.width = `${this.options.size / 6}px`;
+                bar.style.height = `${this.options.size}px`;
+                bar.style.backgroundColor = this.options.color;
+                bar.style.animationDuration = `${this.options.speed}s`;
+                spinner.appendChild(bar);
+            }
+            return spinner;
+        }
+        createRingSpinner() {
+            const spinner = document.createElement('div');
+            spinner.className = 'spinner-ring';
+            this.applyStyles(spinner);
+            spinner.style.border = `${this.options.size / 10}px solid ${this.options.color}`;
+            spinner.style.animationDuration = `${this.options.speed}s`;
+            const beforeStyle = document.createElement('style');
+            beforeStyle.textContent = `
+      .spinner-ring::before {
+        border-width: ${this.options.size / 10}px;
+        border-top-color: ${this.options.color};
+        border-right-color: ${this.options.color};
+      }
+    `;
+            document.head.appendChild(beforeStyle);
+            return spinner;
+        }
+        createPulseSpinner() {
+            const spinner = document.createElement('div');
+            spinner.className = 'spinner-pulse';
+            this.applyStyles(spinner);
+            spinner.style.backgroundColor = this.options.color;
+            spinner.style.animationDuration = `${this.options.speed}s`;
+            return spinner;
+        }
+        applyStyles(element) {
+            element.style.width = `${this.options.size}px`;
+            element.style.height = `${this.options.size}px`;
+        }
+        /**
+         * Check if spinner is currently visible
+         */
+        isShowing() {
+            return this.isVisible;
+        }
+        /**
+         * Destroy the spinner and clean up
+         */
+        destroy() {
+            this.hide();
+        }
+    }
+
+    exports.AnimatedSpinner = AnimatedSpinner;
+
+}));
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/spinner.ts"],"sourcesContent":["import { SpinnerOptions, SpinnerType } from './types';\nimport './styles.css';\n\nexport class AnimatedSpinner {\n    private options: Required<SpinnerOptions>;\n    private overlayElement: HTMLElement | null = null;\n    private spinnerElement: HTMLElement | null = null;\n    private isVisible: boolean = false;\n\n    constructor(options: SpinnerOptions = {}) {\n        this.options = {\n            type: options.type || 'circle',\n            size: options.size || 40,\n            color: options.color || '#3b82f6',\n            speed: options.speed || 1,\n            container: options.container || document.body,\n            overlay: options.overlay !== undefined ? options.overlay : true,\n            overlayColor: options.overlayColor || 'rgba(0, 0, 0, 0.5)',\n            className: options.className || '',\n        };\n    }\n\n    /**\n     * Show the spinner\n     */\n    public show(): void {\n        if (this.isVisible) return;\n\n        this.createSpinner();\n        this.isVisible = true;\n    }\n\n    /**\n     * Hide the spinner\n     */\n    public hide(): void {\n        if (!this.isVisible || !this.overlayElement) return;\n\n        this.overlayElement.classList.add('fade-out');\n\n        setTimeout(() => {\n            if (this.overlayElement && this.overlayElement.parentNode) {\n                this.overlayElement.parentNode.removeChild(this.overlayElement);\n            }\n            this.overlayElement = null;\n            this.spinnerElement = null;\n            this.isVisible = false;\n        }, 300);\n    }\n\n    /**\n     * Update spinner type\n     */\n    public setType(type: SpinnerType): void {\n        this.options.type = type;\n        if (this.isVisible) {\n            this.hide();\n            setTimeout(() => this.show(), 300);\n        }\n    }\n\n    /**\n     * Update spinner color\n     */\n    public setColor(color: string): void {\n        this.options.color = color;\n        if (this.spinnerElement) {\n            this.applyStyles(this.spinnerElement);\n        }\n    }\n\n    /**\n     * Update spinner size\n     */\n    public setSize(size: number): void {\n        this.options.size = size;\n        if (this.spinnerElement) {\n            this.applyStyles(this.spinnerElement);\n        }\n    }\n\n    /**\n     * Update animation speed\n     */\n    public setSpeed(speed: number): void {\n        this.options.speed = speed;\n        if (this.spinnerElement) {\n            this.spinnerElement.style.animationDuration = `${speed}s`;\n        }\n    }\n\n    private createSpinner(): void {\n        // Create overlay\n        this.overlayElement = document.createElement('div');\n        this.overlayElement.className = 'animated-spinner-overlay fade-in';\n\n        if (this.options.overlay) {\n            this.overlayElement.style.backgroundColor = this.options.overlayColor;\n        } else {\n            this.overlayElement.style.backgroundColor = 'transparent';\n            this.overlayElement.style.pointerEvents = 'none';\n        }\n\n        // Create spinner container\n        const container = document.createElement('div');\n        container.className = 'animated-spinner-container';\n        if (this.options.className) {\n            container.classList.add(this.options.className);\n        }\n\n        // Create spinner based on type\n        this.spinnerElement = this.createSpinnerElement();\n        container.appendChild(this.spinnerElement);\n        this.overlayElement.appendChild(container);\n        this.options.container.appendChild(this.overlayElement);\n    }\n\n    private createSpinnerElement(): HTMLElement {\n        const { type } = this.options;\n\n        switch (type) {\n            case 'circle':\n                return this.createCircleSpinner();\n            case 'dots':\n                return this.createDotsSpinner();\n            case 'bars':\n                return this.createBarsSpinner();\n            case 'ring':\n                return this.createRingSpinner();\n            case 'pulse':\n                return this.createPulseSpinner();\n            default:\n                return this.createCircleSpinner();\n        }\n    }\n\n    private createCircleSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-circle';\n        this.applyStyles(spinner);\n        spinner.style.borderWidth = `${this.options.size / 10}px`;\n        spinner.style.borderTopColor = this.options.color;\n        spinner.style.borderRightColor = 'transparent';\n        spinner.style.borderBottomColor = 'transparent';\n        spinner.style.borderLeftColor = 'transparent';\n        spinner.style.animationDuration = `${this.options.speed}s`;\n        return spinner;\n    }\n\n    private createDotsSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-dots';\n\n        for (let i = 0; i < 3; i++) {\n            const dot = document.createElement('div');\n            dot.className = 'dot';\n            dot.style.width = `${this.options.size / 4}px`;\n            dot.style.height = `${this.options.size / 4}px`;\n            dot.style.backgroundColor = this.options.color;\n            dot.style.animationDuration = `${this.options.speed}s`;\n            spinner.appendChild(dot);\n        }\n\n        return spinner;\n    }\n\n    private createBarsSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-bars';\n        spinner.style.height = `${this.options.size}px`;\n\n        for (let i = 0; i < 3; i++) {\n            const bar = document.createElement('div');\n            bar.className = 'bar';\n            bar.style.width = `${this.options.size / 6}px`;\n            bar.style.height = `${this.options.size}px`;\n            bar.style.backgroundColor = this.options.color;\n            bar.style.animationDuration = `${this.options.speed}s`;\n            spinner.appendChild(bar);\n        }\n\n        return spinner;\n    }\n\n    private createRingSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-ring';\n        this.applyStyles(spinner);\n        spinner.style.border = `${this.options.size / 10}px solid ${this.options.color}`;\n        spinner.style.animationDuration = `${this.options.speed}s`;\n\n        const beforeStyle = document.createElement('style');\n        beforeStyle.textContent = `\n      .spinner-ring::before {\n        border-width: ${this.options.size / 10}px;\n        border-top-color: ${this.options.color};\n        border-right-color: ${this.options.color};\n      }\n    `;\n        document.head.appendChild(beforeStyle);\n\n        return spinner;\n    }\n\n    private createPulseSpinner(): HTMLElement {\n        const spinner = document.createElement('div');\n        spinner.className = 'spinner-pulse';\n        this.applyStyles(spinner);\n        spinner.style.backgroundColor = this.options.color;\n        spinner.style.animationDuration = `${this.options.speed}s`;\n        return spinner;\n    }\n\n    private applyStyles(element: HTMLElement): void {\n        element.style.width = `${this.options.size}px`;\n        element.style.height = `${this.options.size}px`;\n    }\n\n    /**\n     * Check if spinner is currently visible\n     */\n    public isShowing(): boolean {\n        return this.isVisible;\n    }\n\n    /**\n     * Destroy the spinner and clean up\n     */\n    public destroy(): void {\n        this.hide();\n    }\n}\n"],"names":[],"mappings":"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"}

package/dist/spinner.d.ts

@@ -0,0 +1,49 @@
+import { SpinnerOptions, SpinnerType } from './types';
+import './styles.css';
+export declare class AnimatedSpinner {
+    private options;
+    private overlayElement;
+    private spinnerElement;
+    private isVisible;
+    constructor(options?: SpinnerOptions);
+    /**
+     * Show the spinner
+     */
+    show(): void;
+    /**
+     * Hide the spinner
+     */
+    hide(): void;
+    /**
+     * Update spinner type
+     */
+    setType(type: SpinnerType): void;
+    /**
+     * Update spinner color
+     */
+    setColor(color: string): void;
+    /**
+     * Update spinner size
+     */
+    setSize(size: number): void;
+    /**
+     * Update animation speed
+     */
+    setSpeed(speed: number): void;
+    private createSpinner;
+    private createSpinnerElement;
+    private createCircleSpinner;
+    private createDotsSpinner;
+    private createBarsSpinner;
+    private createRingSpinner;
+    private createPulseSpinner;
+    private applyStyles;
+    /**
+     * Check if spinner is currently visible
+     */
+    isShowing(): boolean;
+    /**
+     * Destroy the spinner and clean up
+     */
+    destroy(): void;
+}

package/dist/types.d.ts

@@ -0,0 +1,42 @@
+export type SpinnerType = 'circle' | 'dots' | 'bars' | 'ring' | 'pulse';
+export interface SpinnerOptions {
+    /**
+     * Type of spinner animation
+     * @default 'circle'
+     */
+    type?: SpinnerType;
+    /**
+     * Size of the spinner in pixels
+     * @default 40
+     */
+    size?: number;
+    /**
+     * Primary color of the spinner
+     * @default '#3b82f6'
+     */
+    color?: string;
+    /**
+     * Animation speed in seconds
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * Container element to append spinner to
+     * @default document.body
+     */
+    container?: HTMLElement;
+    /**
+     * Whether to show overlay background
+     * @default true
+     */
+    overlay?: boolean;
+    /**
+     * Overlay background color
+     * @default 'rgba(0, 0, 0, 0.5)'
+     */
+    overlayColor?: string;
+    /**
+     * Custom CSS class to add to spinner
+     */
+    className?: string;
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "satyam-animated-spinner",
+    "version": "1.0.0",
+    "type": "module",
+    "description": "A beautiful, customizable animated spinner component with multiple animation styles",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
+    "browser": "dist/index.umd.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "rollup -c",
+        "prepublishOnly": "npm run build"
+    },
+    "keywords": [
+        "spinner",
+        "loading",
+        "loader",
+        "animated",
+        "animation",
+        "ui",
+        "component",
+        "preloader",
+        "progress"
+    ],
+    "author": "Satyam",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/satyam/animated-spinner"
+    },
+    "devDependencies": {
+        "@rollup/plugin-typescript": "^11.1.5",
+        "rollup": "^4.9.0",
+        "rollup-plugin-postcss": "^4.0.2",
+        "tslib": "^2.6.2",
+        "typescript": "^5.3.3"
+    }
+}