A Font Awesome Busy Spinner in WPF

Back to index Matthieu Maitre

Font Awesome is a great source of icons for Web Apps, and it happens to work just as well in WPF Desktop apps. In particular fa-spinner can be combined with WPF animations to create a simple busy spinner:

Font Awesome’s CSS style file points to a TTF font file that can be directly copied into the Visual Studio project. At the time of writing, it is available here.

fa-spinner has unicode f110 and animating it is a matter of applying a RotateTransform to a TextBlock and defining an infinite animation as part of a storyboard in XAML:

<Window.Resources>
    <Storyboard x:Key="WaitStoryboard">
        <DoubleAnimation
        Storyboard.TargetName="Wait"
        Storyboard.TargetProperty="(TextBlock.RenderTransform).(RotateTransform.Angle)"
        From="0"
        To="360"
        Duration="0:0:2"
        RepeatBehavior="Forever" />
    </Storyboard>
</Window.Resources>

<TextBlock Name="Wait" FontFamily="Fonts/#FontAwesome" FontSize="50" Text="&#xf110;" RenderTransformOrigin="0.5, 0.5">
    <TextBlock.RenderTransform>
        <RotateTransform Angle="0" />
    </TextBlock.RenderTransform>
</TextBlock>

The animation can be started (and stopped) on demand by the C# code behind:

((Storyboard)FindResource("WaitStoryboard")).Begin();

See this GitHub repo for the full code.

If you are planning on making more heavy use of Font Awesome, you may consider the FontAwesome.WPF NuGet package which simplifies using those icons.

If you are looking for different styles of busy indicators, a few alternatives are available: