Introduction

A loading animation in WPF is useful only if the UI remains responsive while the real work happens in the background. The visual part is usually easy; the more important part is making sure you do not block the UI thread and freeze the animation you just created.

Build a Simple Spinner With a Storyboard

WPF animations are commonly driven by a Storyboard. A small rotating shape is enough for a clean loading indicator.

1<Window x:Class="LoadingDemo.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        Title="Loading Demo" Height="220" Width="320">
5    <Grid>
6        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
7            <Border Width="40" Height="40"
8                    BorderThickness="4"
9                    BorderBrush="DodgerBlue"
10                    CornerRadius="20"
11                    Visibility="{Binding IsLoading, Converter={StaticResource BoolToVisibilityConverter}}">
12                <Border.RenderTransform>
13                    <RotateTransform x:Name="SpinnerTransform" CenterX="20" CenterY="20" />
14                </Border.RenderTransform>
15                <Border.Triggers>
16                    <EventTrigger RoutedEvent="Loaded">
17                        <BeginStoryboard>
18                            <Storyboard RepeatBehavior="Forever">
19                                <DoubleAnimation
20                                    Storyboard.TargetName="SpinnerTransform"
21                                    Storyboard.TargetProperty="Angle"
22                                    From="0" To="360" Duration="0:0:1" />
23                            </Storyboard>
24                        </BeginStoryboard>
25                    </EventTrigger>
26                </Border.Triggers>
27            </Border>
28
29            <Button Content="Start Work" Width="120" Margin="0,20,0,0" Click="StartWork_Click"/>
30        </StackPanel>
31    </Grid>
32</Window>

This spinner is intentionally simple. The important part is the continuously animated RotateTransform.

Do the Real Work Asynchronously

If the button click handler performs heavy work on the UI thread, the animation stops even though the XAML is correct. Use async and await background work instead.

1using System.ComponentModel;
2using System.Runtime.CompilerServices;
3using System.Threading.Tasks;
4using System.Windows;
5
6namespace LoadingDemo;
7
8public partial class MainWindow : Window, INotifyPropertyChanged
9{
10    private bool _isLoading;
11
12    public bool IsLoading
13    {
14        get => _isLoading;
15        set
16        {
17            _isLoading = value;
18            OnPropertyChanged();
19        }
20    }
21
22    public MainWindow()
23    {
24        InitializeComponent();
25        DataContext = this;
26    }
27
28    private async void StartWork_Click(object sender, RoutedEventArgs e)
29    {
30        IsLoading = true;
31        try
32        {
33            await Task.Run(async () =>
34            {
35                await Task.Delay(3000);
36            });
37        }
38        finally
39        {
40            IsLoading = false;
41        }
42    }
43
44    public event PropertyChangedEventHandler? PropertyChanged;
45
46    private void OnPropertyChanged([CallerMemberName] string? name = null)
47    {
48        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
49    }
50}

The UI thread stays free to animate because the slow work happens away from it.

Why Animation and Threading Are Connected

WPF renders and updates UI elements on the UI thread. A loading animation is not a magic exception. If your code performs:

• synchronous network calls
• large file reads
• long CPU loops
• blocking sleeps on the UI thread

the spinner cannot update smoothly. That is why a "loading animation problem" is often really a threading problem.

Show and Hide the Indicator Intentionally

Do not leave a spinner running forever. It should reflect a real state transition:

• show it when work begins
• hide it when work completes or fails
• optionally replace it with a success or error message

That makes the indicator trustworthy. Users quickly lose confidence if the animation keeps spinning after the task is already done or deadlocked.

MVVM-Friendly Approach

In larger WPF applications, you usually keep the loading state in a view model and bind Visibility or IsEnabled to that state. The spinner animation itself can remain in XAML, while the view model exposes IsLoading.

That structure separates visual behavior from application logic and keeps code-behind small. The underlying rule is still the same: never block the UI thread while expecting the animation to remain smooth.

Common Pitfalls

The most common mistake is starting a nice Storyboard and then doing all the real work synchronously on the UI thread. The animation exists, but the window freezes and users never see it animate properly.

Another issue is using the loading indicator without a real state model. If the code forgets to clear the flag on failure paths, the spinner stays visible forever.

People also overdesign the animation itself when the real problem is responsiveness. A simple spinner with correct async behavior is usually better than a flashy control on a blocked UI thread.

Summary

• WPF loading animations are usually implemented with a Storyboard.
• The animation only helps if the UI thread remains free to render it.
• Run long work asynchronously and toggle a bound loading state.
• Keep the indicator visible only while real work is in progress.
• If the spinner freezes, the first thing to inspect is blocking UI-thread code.