Components
Loading
Shows a modal dialog with a loading animation and customizable message. The component automatically displays when mounted and can show a close button for error states.
Basic Usage
The component requires a message prop and automatically displays when mounted.
Props
Features
- Automatic display on mount
- Animated loading dots
- Pulsing message text
- Optional close button for error states
- DaisyUI modal styling
- Responsive design
Error State
When the message is "Failed, please try again!", the component automatically displays a close button:
Styling
The component uses DaisyUI classes and includes:
- Modal backdrop
- Centered content
- Animated loading dots
- Pulsing text animation
- Responsive layout
- Custom button styling
Animation
The component includes several animations:
- Pulsing text effect on the message
- Bouncing dots with staggered delays
- Smooth modal transitions
Example Usage
Technical Notes
- Uses the HTML
<dialog>
element - Implements Svelte's
onMount
lifecycle function - Uses DaisyUI's modal component
- Includes TypeScript support