Class Preloader
A visual element that indicates content is being loaded or processed.
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class Preloader : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolderRemarks
The Preloader component provides visual feedback to users when content is loading or an operation is in progress. It consists of a circular progress animation with an optional centered logo, making it ideal for initial app loading screens or during resource-intensive operations.
The component uses a circular progress indicator that rotates smoothly to indicate ongoing activity. The logo element can be customized through USS styling to match your application's branding.
By default, the Preloader ignores user input events (PickingMode.Ignore) as it's designed to be a visual indicator only.
The Preloader component consists of two main elements: a CircularProgress element that provides the rotating animation and a centered Image element that can display a logo through USS styling.
Examples
Basic usage of the Preloader component: Adding a basic preloader to a parent element.
// Create a new Preloader
var preloader = new Preloader();
// Add it to a parent element
parentElement.Add(preloader);
Customizing the Preloader appearance using USS: Styling the preloader with custom size, colors, and logo.
.appui-preloader {
width: 100px;
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
}
.appui-preloader__circular-progress {
--progress-color: rgb(0, 122, 255);
}
.appui-preloader__logo {
--unity-image: url('project://path-to-your-logo.png');
width: 50%;
height: 50%;
}
Using the Preloader in a loading screen: Creating a full-screen loading screen with a centered preloader.
public class LoadingScreen : VisualElement
{
public LoadingScreen()
{
style.flexGrow = 1;
style.alignItems = Align.Center;
style.justifyContent = Justify.Center;
var preloader = new Preloader();
preloader.style.width = 120;
preloader.style.height = 120;
Add(preloader);
}
}
Constructors
Preloader()
Constructor.
Declaration
public Preloader()Fields
circularProgressUssClassName
The Preloader's circular progress USS class name.
Declaration
public const string circularProgressUssClassName = "appui-preloader__circular-progress"Field Value
| Type | Description |
|---|---|
| string |
logoUssClassName
The Preloader's logo USS class name.
Declaration
public const string logoUssClassName = "appui-preloader__logo"Field Value
| Type | Description |
|---|---|
| string |
ussClassName
The Preloader's USS class name.
Declaration
public const string ussClassName = "appui-preloader"Field Value
| Type | Description |
|---|---|
| string |