DaisyLoading

Overview

DaisyLoading provides animated loading indicators with 27 different animation styles, 5 size options, and 9 color variants. The control includes standard DaisyUI animations, creative terminal-inspired variants, Matrix/retro variants, and unique special effect variants. All animations scale properly across all sizes using Viewbox-based rendering.

Animation Variants

DaisyUI Standard Variants

Terminal-Inspired Variants

Matrix/Colon-Dot Variants

Special Effect Variants

Accessibility Support

DaisyLoading is designed to be accessible to users of assistive technologies like screen readers. The visual animation is decorative; the accessibility layer provides meaningful information.

How It Works

1. AutomationPeer: The control exposes itself as a ProgressBar to assistive technologies via a custom DaisyLoadingAutomationPeer.

2. Default Accessible Name: By default, screen readers announce "Loading" when encountering this control.

3. Customizable Text: Use the AccessibleText property to provide context-specific messages.

The AccessibleText Property

When you change AccessibleText, the control automatically updates its AutomationProperties.Name so screen readers pick up the new value.

Accessibility Examples

<!-- Default: screen reader announces "Loading" -->
<controls:DaisyLoading Variant="Spinner" />

<!-- Contextual message: announces "Loading your profile data" -->
<controls:DaisyLoading Variant="Dots" AccessibleText="Loading your profile data" />

<!-- Action-specific: announces "Saving your changes" -->
<controls:DaisyLoading Variant="Ring" AccessibleText="Saving your changes" />

<!-- With full context: announces "Uploading file, please wait" -->
<controls:DaisyLoading Variant="Bars" AccessibleText="Uploading file, please wait" />

<!-- Processing state: announces "Processing payment" -->
<controls:DaisyLoading Variant="Pulse" AccessibleText="Processing payment" Color="Primary" Size="Large" />

Best Practices for Accessible Loading States

1. Be Specific: Instead of generic "Loading", describe what is loading:

- ✅ "Loading search results"

- ✅ "Fetching user data"

- ❌ "Loading" (too generic when context matters)

2. Include Progress if Known: If you know the progress, consider using DaisyProgress instead, or append progress info:

- "Uploading file (45% complete)"

3. Keep It Concise: Screen readers read the text aloud, so keep messages short and clear:

- ✅ "Saving changes"

- ❌ "Please wait while we save your changes to the database"

4. Match Visual Context: If there's visible text near the loader (e.g., "Loading your dashboard..."), use the same text for AccessibleText.

5. Update Dynamically: If the loading state changes (e.g., from "Connecting" to "Downloading"), update AccessibleText accordingly in your ViewModel.

Technical Implementation Details

The accessibility is implemented via:

// Static constructor sets default accessible name
static DaisyLoading()
{
    AutomationProperties.NameProperty.OverrideDefaultValue<DaisyLoading>("Loading");
}

// Custom automation peer exposes control as ProgressBar
protected override AutomationPeer OnCreateAutomationPeer()
{
    return new DaisyLoadingAutomationPeer(this);
}

// DaisyLoadingAutomationPeer returns:
// - AutomationControlType.ProgressBar (so AT recognizes it as a progress indicator)
// - The AccessibleText value as the control's Name
// - IsContentElement = true, IsControlElement = true (so it's discoverable)

This ensures that:

• Screen readers identify the control as a progress indicator (not just a generic element)
• The accessible name is always available and customizable
• The control participates in the accessibility tree properly

Theme File Organization

The DaisyLoading theme styles are organized into multiple files for maintainability:

Adding New Variants

To add a new loading variant:

1. Choose the appropriate category file (or create a new one if it doesn't fit existing categories)

2. Add a Style Selector="controls|DaisyLoading[Variant=YourVariant]" with a ControlTemplate

3. Add animation styles targeting template elements using the pattern controls|DaisyLoading[Variant=YourVariant] /template/ ElementType.ClassName

4. Add the new enum value to DaisyLoadingVariant in Controls/DaisyLoading.cs

5. Update the design preview in DaisyLoading.axaml to include the new variant

Size Options

All variants scale proportionally across sizes. Canvas-based animations use Viewbox wrapping for smooth scaling.

Color Variants

Use the Color property to apply theme colors. All variants support coloring.

Quick Examples

<!-- Basic spinner (default) -->
<controls:DaisyLoading Variant="Spinner" />

<!-- Different sizes -->
<controls:DaisyLoading Variant="Spinner" Size="ExtraSmall" />
<controls:DaisyLoading Variant="Spinner" Size="Large" />
<controls:DaisyLoading Variant="Spinner" Size="ExtraLarge" />

<!-- With colors -->
<controls:DaisyLoading Variant="Spinner" Color="Primary" />
<controls:DaisyLoading Variant="Ring" Color="Success" />
<controls:DaisyLoading Variant="Dots" Color="Warning" />

<!-- Terminal-style variants -->
<controls:DaisyLoading Variant="Orbit" Color="Primary" Size="Large" />
<controls:DaisyLoading Variant="Snake" Color="Success" />
<controls:DaisyLoading Variant="Pulse" Color="Info" Size="ExtraLarge" />
<controls:DaisyLoading Variant="Wave" Color="Warning" />
<controls:DaisyLoading Variant="Bounce" Color="Error" Size="Large" />

<!-- Matrix/Colon-dot variants -->
<controls:DaisyLoading Variant="Matrix" Color="Accent" />
<controls:DaisyLoading Variant="MatrixInward" Color="Primary" Size="Large" />
<controls:DaisyLoading Variant="MatrixOutward" Color="Info" Size="Large" />
<controls:DaisyLoading Variant="MatrixVertical" Color="Success" />

<!-- Special effect variants -->
<controls:DaisyLoading Variant="MatrixRain" Color="Success" Size="Large" />
<controls:DaisyLoading Variant="Hourglass" Color="Warning" Size="ExtraLarge" />
<controls:DaisyLoading Variant="SignalSweep" Color="Info" Size="Large" />
<controls:DaisyLoading Variant="BitFlip" Color="Primary" />
<controls:DaisyLoading Variant="PacketBurst" Color="Secondary" Size="Large" />
<controls:DaisyLoading Variant="CometTrail" Color="Accent" />
<controls:DaisyLoading Variant="Heartbeat" Color="Error" Size="Large" />
<controls:DaisyLoading Variant="TunnelZoom" Color="Info" Size="ExtraLarge" />
<controls:DaisyLoading Variant="GlitchReveal" Color="Success" />
<controls:DaisyLoading Variant="RippleMatrix" Color="Primary" Size="Large" />
<controls:DaisyLoading Variant="CursorBlink" Color="Success" />
<controls:DaisyLoading Variant="CountdownSpinner" Color="Warning" Size="Large" />

<!-- With accessibility -->
<controls:DaisyLoading Variant="Spinner" AccessibleText="Loading dashboard" />

Animation Timing Reference

Property Summary

Variant Selection Guide