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.

        <script>
    import Loading from "$lib/components/Loading.svelte"
</script>

<Loading message="Loading..." />

      

# 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:

        <Loading message="Failed, please try again!" />

      

# 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

        <script>
    import Loading from "$lib/components/Loading.svelte"
    
    // For loading state
    <Loading message="Processing your request..." />
    
    // For error state
    <Loading message="Failed, please try again!" />
</script>

      

# Technical Notes

• Uses the HTML <dialog> element
• Implements Svelte's onMount lifecycle function
• Uses DaisyUI's modal component
• Includes TypeScript support