Introducing the New WinUI Busy Indicator Control
Tags: csharp, dotnet, winui, desktop
Published: 2022-10-26 04:54:02

---
title: Introducing the New WinUI Busy Indicator Control
published: true
date: 2022-10-20 11:23:44 UTC
tags: csharp, dotnet, winui, desktop
canonical_url: https://www.syncfusion.com/blogs/post/winui-busy-indicator-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjhvgj9l0emg9pt21npj.png
---

We at [Syncfusion](https://www.syncfusion.com/ "Syncfusion UI components") are happy to announce the inclusion of the new [WinUI Busy Indicator](https://www.syncfusion.com/winui-controls/busy-indicator "WinUI Busy Indicator control") control in the [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3") release.

The WinUI Busy Indicator control is used to display a predefined animation when an operation runs in the background of an application and the user waits for its completion. It can be customized in terms of size, color, duration, and content.

Its key features are:

- [Animation Types](#animation-types)
- [Busy Content](#busy-content)
- [Duration](#duration)
- [Size](#size)
- [Color](#color)

Let’s cover each briefly and see the steps to get started with the WinUI Busy Indicator control.

## <a name="animation-types">Animation types</a>

It supports the following seven prebuilt animation types, and you can pick the one that satisfies your need:

- Dotted Circle
- Dotted Circular Fluent
- Dotted Linear
- Double Circle
- Linear Box
- Linear Oscillating Box
- Single Circle

You can see each animation type in action in the following graphic.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Busy-Indicator-Animation-Types.gif" alt="Busy Indicator Animation Types" style="width:100%">

  <figcaption>Busy Indicator Animation Types</figcaption>

</figure>

## <a name="busy-content">Busy content</a>

You can set a custom message that indicates the busy status of the control to users. You can also place the busy content at the top, bottom, left, or right of the Busy Indicator, as well as customize it using the DataTemplate support.

Refer to the following images.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Placing-Busy-Content-at-the-Top-of-the-WinUI-Busy-Indicator.png" alt="Placing Busy Content at the Top of the WinUI Busy Indicator" style="width:100%">

  <figcaption>Placing Busy Content at the Top of the WinUI Busy Indicator</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Customizing-the-WinUI-Busy-Indicator%E2%80%99s-Content-with-Template-Support.png" alt="Customizing the WinUI Busy Indicator’s Content with Template Support" style="width:100%">

  <figcaption>Customizing the WinUI Busy Indicator’s Content with Template Support</figcaption>

</figure>

## <a name="duration">Duration</a>

The WinUI Busy Indicator control allows users to customize the animation speed with values ranging from 0 to 1.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Busy-Indicator-with-Custom-Duration.gif" alt="Busy Indicator with Custom Duration" style="width:100%">

  <figcaption>Busy Indicator with Custom Duration</figcaption>

</figure>


## <a name="size">Size</a>

You can customize the size of the Busy Indicator with values ranging from 0 to 1.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Busy-Indicator-with-Custom-Size.gif" alt="Busy Indicator with Custom Size" style="width:100%">

  <figcaption>Busy Indicator with Custom Size</figcaption>

</figure>


## <a name="color">Color</a>

Also, customize the color of the indicator based on your requirements.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Busy-Indicator-with-Custom-Color.png" alt="Busy Indicator with Custom Color" style="width:100%">

  <figcaption>Busy Indicator with Custom Color</figcaption>

</figure>


## Getting started with the WinUI Busy Indicator control

Now that we’ve seen the features of the WinUI Busy Indicator control, let’s see the steps to get started with it.

### Step 1: Create a WinUI application.

First, follow the guidelines in the [Create your first WinUI 3 (Windows App SDK) project](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/create-your-first-winui3-app?tabs=desktop-csharp "Documentation: Create your first WinUI 3 project") documentation to create a simple WinUI project.

### Step 2: Add the Syncfusion.Notifications.WinUI NuGet package.

Then, install the latest [Syncfusion.Notifications.WinUI](https://www.nuget.org/packages/Syncfusion.Notifications.WinUI "Syncfusion.Notifications.WinUI NuGet package")[ ](https://www.nuget.org/packages/Syncfusion.Core.WinUI/)NuGet package in your project from the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery")or from the installed location, **C:\Program Files (x86)\Syncfusion\Essential Studio\WinUI\xx.x.x.xx\NuGetPackages**.

**Note:**  **xx.x.x.xx** denotes the version of the installed Syncfusion WinUI Notifications package.

### Step 3: Add the namespace.

Now, include the  **Syncfusion.UI.Xaml.Notifications**  namespace in your XAML file with the following code.

```csharp
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Notifications"
```

### Step 4: Initialize the Busy Indicator control.

Finally, initialize the WinUI Busy Indicator control with the required animation type and content as shown in the following code example.

```xml
<Page
   x:Class="GettingStarted.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:GettingStarted"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:syncfusion="using:Syncfusion.UI.Xaml.Core"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
 <Grid>
  <syncfusion:SfBusyIndicator IsActive="True"
                               AnimationType="DottedCircle"
                               BusyContent="Loading…" />
 </Grid>
 
</Page>
```

After executing the above code, we will have a page populated with the Busy Indicator control like in the following output image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/WinUI-Busy-Indicator-Control.gif" alt="WinUI Busy Indicator Control" style="width:100%">

  <figcaption>WinUI Busy Indicator Control</figcaption>

</figure>

## Conclusion

Thanks for reading! I hope you enjoyed learning about the new Syncfusion [WinUI Busy Indicator](https://www.syncfusion.com/winui-controls/busy-indicator "WinUI Busy Indicator") control and its features available in our [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3") release. Also, check out our [Release Notes ](https://help.syncfusion.com/common/essential-studio/release-notes/v20.3.0.47 "Syncfusion Release Notes")and [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion What's New") pages to see all the new updates in this release. Try them out and leave your feedback in the comments section below!

You can download and check out our WinUI demo app in the [Microsoft Store](https://install.appcenter.ms/orgs/syncfusion-demos/apps/winui-demos/distribution_groups/release "Syncfusion WinUI demos on the App Center").

For current customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our newest features.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/winui "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 3 Is Here!")
- [Introducing the New WinUI Rating Control](https://www.syncfusion.com/blogs/post/introducing-the-new-winui-rating-control.aspx "Blog: Introducing the New WinUI Rating Control")
- [What’s New in 2022 Volume 3: WinUI and WPF](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-3-winui-and-wpf.aspx "Blog: What’s New in 2022 Volume 3: WinUI and WPF")
- [Achieve Google-Like Autosuggestions with the WinUI AutoComplete Control](https://www.syncfusion.com/blogs/post/achieve-google-like-autosuggestions-with-the-winui-autocomplete-control.aspx "Blog: Achieve Google-Like Autosuggestions with the WinUI AutoComplete Control")