The Blazor Spinner component denotes when long-running tasks are ongoing for which there is no information about their progress. It provides circular progress indicators without interaction capabilities, helping maintain visual feedback during data processing and background operations. This demo showcases various features including multiple sizes, customizable thickness, color customization, descriptive labels, modal overlay capabilities, and custom templates to create loading indicators that seamlessly integrate with your applications.

The basic Spinner displays an indeterminate loading indicator with a rotating animation that signals an ongoing process without specific progress information. It shows users that a background operation is in progress, maintaining visual feedback during data processing or transitions.

The Spinner component supports multiple size options that let developers uphold visual consistency across their applications. By default, the Spinner size is 30px and can be customized using the Size property to seamlessly adjust to various design needs and integrate within other Blazor components.

The default appearance of the Blazor Spinner can be customized by changing its color and stroke width. You can customize the spinner's color by applying custom CSS classes or using the CssClass property to match your application's color scheme and design theme.

A modal spinner can be initialized by adding the e-spin-overlay class in the CssClass property to create a spinner that overlays the entire container, preventing interaction with underlying elements. This is useful for showing full-screen or modal loading states.

SpinnerTemplates in the Blazor Spinner component provide a robust mechanism for users to create custom loading elements that seamlessly integrate with their applications. The flexibility and customization options enhance the development experience and result in visually appealing and consistent loading experiences.