1. Components
  2. Loading

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

Prop Type Required Description
message string Yes The message to display in the loading modal

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