Class SpinnerType

Specifies the built-in themes that can be applied to the Syncfusion.Blazor.Spinner.SfSpinner component.

Inheritance

System.Object

SpinnerType

Namespace: Syncfusion.Blazor.Spinner

Assembly: Syncfusion.Blazor.dll

Syntax

public sealed class SpinnerType : Enum

Remarks

The theme determines the visual appearance of the spinner, including its shape, color, and animation. Each theme corresponds to a different design system, such as Material, Bootstrap, or Fluent. By default, the spinner will inherit the theme from the application.

Examples

A simple Spinner component with Material theme.

@using Syncfusion.Blazor.Spinner

<SfSpinner Type="SpinnerType.Material"></SfSpinner>

Fields

Bootstrap

Specifies the Bootstrap theme for the spinner.

Declaration

public const SpinnerType Bootstrap

Field Value

Type
SpinnerType

Remarks

This theme applies a generic Bootstrap style to the spinner. For version-specific styling, consider using Bootstrap4 or Bootstrap5.

Bootstrap4

Specifies the Bootstrap 4 theme for the spinner.

Declaration

public const SpinnerType Bootstrap4

Field Value

Type
SpinnerType

Remarks

Applies the Bootstrap 4 styling to the spinner. This theme is ideal for applications built with the Bootstrap 4 framework, ensuring visual consistency.

Bootstrap5

Specifies the Bootstrap 5 theme for the spinner.

Declaration

public const SpinnerType Bootstrap5

Field Value

Type
SpinnerType

Remarks

Applies the Bootstrap 5 styling to the spinner, which includes new features and design updates over Bootstrap 4. Use this for applications built on the Bootstrap 5 framework.

Fabric

Specifies the Fabric theme for the spinner.

Declaration

public const SpinnerType Fabric

Field Value

Type
SpinnerType

Remarks

This theme is based on Microsoft's old Fabric Design System. It provides a look and feel consistent with older Microsoft Office and web products.

Fluent

Specifies the Fluent theme for the spinner.

Declaration

public const SpinnerType Fluent

Field Value

Type
SpinnerType

Remarks

This theme applies the Microsoft Fluent Design System, characterized by light, depth, motion, and material. It creates an intuitive and powerful experience.

Fluent2

Specifies the Fluent2 theme for the spinner.

Declaration

public const SpinnerType Fluent2

Field Value

Type
SpinnerType

Remarks

This theme aligns with the latest Microsoft Fluent 2 Design System, an evolution of Fluent Design with a renewed focus on simplicity, consistency, and a more modern aesthetic across Microsoft’s ecosystem.

HighContrast

Specifies the High-contrast theme for the spinner.

Declaration

public const SpinnerType HighContrast

Field Value

Type
SpinnerType

Remarks

This theme enhances accessibility by using a starkly contrasting color scheme, making the UI easier to see for users with low vision.

Material

Specifies the Material theme for the spinner.

Declaration

public const SpinnerType Material

Field Value

Type
SpinnerType

Remarks

This theme applies Google's Material Design guidelines to the spinner, resulting in a clean, modern appearance with ripple effects and bold graphics.

Material3

Specifies the Material3 theme for the spinner.

Declaration

public const SpinnerType Material3

Field Value

Type
SpinnerType

Remarks

This theme aligns with the latest Material Design 3 guidelines, featuring updated color palettes, typography, and component shapes for a more dynamic and personal UI.

None

Specifies that the spinner should automatically inherit the theme from the application.

Declaration

public const SpinnerType None

Field Value

Type
SpinnerType

Remarks

When set to None, the spinner's appearance will be determined by the globally applied theme, ensuring a consistent look and feel across the application. This is the default value.

Tailwind

Specifies the Tailwind CSS theme for the spinner.

Declaration

public const SpinnerType Tailwind

Field Value

Type
SpinnerType

Remarks

Applies a theme based on the Tailwind CSS framework, known for its utility-first classes and customizability. Ideal for projects using Tailwind CSS.

Tailwind3

Specifies the Tailwind theme version 3 for the spinner.

Declaration

public const SpinnerType Tailwind3

Field Value

Type
SpinnerType

Remarks

Applies a theme based on version 3 of the Tailwind CSS framework. This version introduced significant updates like the JIT engine by default, making it faster and more powerful.