Skip to main content

LoadingLogo

LoadingLogo

Animated brand logo for loading states

Tags: component branding loading

View Demo

LoadingLogo displays the Classic Homes brand logo with an optional loading animation for splash screens and loading states.

Import​

<script>
  import { LoadingLogo } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<LoadingLogo loading />

Props​

Prop Type Default Description
width number 40 Width in pixels
height number 40 Height in pixels
loading boolean false Enable loading animation
variant 'light' | 'dark' 'dark' Color variant
class string - Additional classes

Static Display​

Without animation:

<LoadingLogo />

Loading Animation​

With tracing animation:

<LoadingLogo loading />

Variants​

Dark (Default)​

For light backgrounds:

<LoadingLogo variant="dark" loading />

Light​

For dark backgrounds:

<div class="bg-gray-900 p-8">
  <LoadingLogo variant="light" loading />
</div>

Custom Size​

<LoadingLogo width={80} height={80} loading />

Examples​

Splash Screen​

{#if loading}
  <div class="fixed inset-0 flex items-center justify-center bg-background">
    <div class="flex flex-col items-center gap-4">
      <LoadingLogo width={64} height={64} loading />
      <p class="text-sm text-muted-foreground">Loading...</p>
    </div>
  </div>
{/if}

Page Loading​

{#if pageLoading}
  <div class="flex items-center justify-center min-h-[400px]">
    <LoadingLogo loading />
  </div>
{:else}
  <main>{pageContent}</main>
{/if}

Dark Background Splash​

<div class="fixed inset-0 flex items-center justify-center bg-gray-900">
  <LoadingLogo variant="light" width={80} height={80} loading />
</div>

Button Loading State​

<Button disabled={submitting}>
  {#if submitting}
    <LoadingLogo width={20} height={20} loading class="mr-2" />
    Saving...
  {:else}
    Save
  {/if}
</Button>

Initial App Load​

<!-- +layout.svelte -->
<script>
  let appReady = $state(false);

  onMount(() => {
    // Initialize app
    setTimeout(() => (appReady = true), 1500);
  });
</script>

{#if !appReady}
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-background">
    <LoadingLogo width={64} height={64} loading />
  </div>
{/if}

<div class={appReady ? '' : 'hidden'}>
  <slot />
</div>

Animation Details​

When loading is true:

  • Logo fill color inverts (red fills with white, or white with red)
  • Dashed stroke traces around the logo paths
  • Animation duration: 2 seconds (continuous loop)
  • Respects prefers-reduced-motion

Color Reference​

Variant Normal Fill Loading Fill Stroke
dark Brand Red White Brand Red
light White Brand Red White

Accessibility​

  • role="status" when loading
  • role="img" when static
  • Screen reader "Loading" text when loading
  • SVG is aria-hidden
On this page