gabrielmoreira Implementing Busy Indicators
The Syncfusion .NET MAUI Busy Indicator (SfBusyIndicator) provides visual feedback during app loading, data processing, and other time-consuming operations. It offers 7 built-in animation types, extensive customization options, and a simple API for controlling loading states.
When to Use This Skill
Use this skill when you need to:
- Display loading states during data fetching, API calls, or initialization
- Show processing feedback for long-running operations
- Implement activity indicators with custom animations and styling
- Add busy overlays to prevent user interaction during processing
- Create branded loading experiences with custom colors, sizes, and titles
- Control animation states dynamically based on application logic
- Provide visual feedback that improves perceived performance
Common scenarios: Login screens, data synchronization, file uploads, search operations, report generation, async operations, and any task requiring user patience.
Component Overview
Key Capabilities:
- 7 Animation Types: CircularMaterial, LinearMaterial, Cupertino, SingleCircle, DoubleCircle, Globe, HorizontalPulsingBox
- Full Customization: Colors, sizes, speeds, overlay backgrounds
- Title Support: Configurable text with font customization and placement options
- State Control: Start/stop animations programmatically with IsRunning property
- Responsive Design: Auto-scaling fonts and adaptive sizing
- Overlay Support: Optional background overlays with gradient support
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
When to read: First-time implementation, project setup, package installation
What you'll learn:
- Installing Syncfusion.Maui.Core NuGet package
- Registering handlers in MauiProgram.cs
- Creating your first busy indicator
- Basic XAML and C# implementation
Animation Types
📄 Read: references/animation-types.md
When to read: Choosing visual style, implementing specific animation types
What you'll learn:
- All 7 built-in animation types with examples
- CircularMaterial (Android Material Design style)
- LinearMaterial (horizontal progress bar style)
- Cupertino (iOS-style spinner)
- SingleCircle, DoubleCircle (concentric circle animations)
- Globe (3D globe rotation effect)
- HorizontalPulsingBox (pulsing box animation)
- Visual comparisons and use cases
Customization
📄 Read: references/customization.md
When to read: Styling indicators, adjusting colors/sizes, setting animation speed
What you'll learn:
- Indicator color customization (IndicatorColor)
- Overlay background styling (OverlayFill)
- Gradient backgrounds with Brush types
- Animation duration control (DurationFactor: 0-1)
- Indicator sizing (SizeFactor: 0-1)
- Complete styling examples
Title Configuration
📄 Read: references/title-configuration.md
When to read: Adding text labels, customizing fonts, positioning titles
What you'll learn:
- Setting title text (Title property)
- Text color customization (TextColor)
- Title placement (Top, Bottom, None)
- Spacing control (TitleSpacing)
- Font customization (size, attributes, family)
- Auto-scaling support
Controlling Animation State
📄 Read: references/controlling-state.md
When to read: Starting/stopping animations, managing visibility, dynamic control
What you'll learn:
- IsRunning property usage
- Starting and stopping animations
- Default behavior (false)
- Binding to ViewModel properties
- Event-driven state management