# Spinner

The Spinner component is a visual indicator that displays an animated circle outline, suggesting that a background process is running. It is commonly used when the duration of the task is unknown, serving as an indeterminate progress indicator. The Spinner supports various sizes and allows positioning of an associated label to provide additional context (for example, "Loading...", "Saving...", etc.). It is part of the Progress group in Tesserae's UI components.

Instantiate the Spinner component using the Tesserae.UI helper methods. You can create a spinner with initial text and further customize its size and label position. The following sample demonstrates a basic usage:

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

public class SpinnerUsageExample
{
    public HTMLElement Render()
    {
        // Create a medium spinner with the default right positioned label.
        var spinner = Spinner("Loading...")
                        .Medium();

        return spinner.Render();
    }
}

• Success()
  Adds a success indicator style to the spinner.
  • Returns: Spinner instance.
  • Usage: spinner.Success();

• Danger()
  Adds a danger indicator style to the spinner.
  • Returns: Spinner instance.
  • Usage: spinner.Danger();

• Primary()
  Resets any success or danger indicator styles, setting the spinner to a primary style.
  • Returns: Spinner instance.
  • Usage: spinner.Primary();

• Left()
  Sets the label position to left of the spinner.
  • Returns: Spinner instance.
  • Usage: spinner.Left();

• Right()
  Sets the label position to right of the spinner.
  • Returns: Spinner instance.
  • Usage: spinner.Right();

• Above()
  Sets the label position above the spinner.
  • Returns: Spinner instance.
  • Usage: spinner.Above();

• Below()
  Sets the label position below the spinner.
  • Returns: Spinner instance.
  • Usage: spinner.Below();

• XSmall()
  Adjusts the spinner size to extra small.
  • Returns: Spinner instance.
  • Usage: spinner.XSmall();

• Small()
  Adjusts the spinner size to small.
  • Returns: Spinner instance.
  • Usage: spinner.Small();

• Medium()
  Adjusts the spinner size to medium.
  • Returns: Spinner instance.
  • Usage: spinner.Medium();

• Large()
  Adjusts the spinner size to large.
  • Returns: Spinner instance.
  • Usage: spinner.Large();

• SetText(string text)
  Sets the label text associated with the spinner.
  • Parameter: text - the new text to display.
  • Returns: Spinner instance.
  • Usage: spinner.SetText("Please wait...");

• Position
  Gets or sets the label position relative to the spinner.
  • Type: Spinner.LabelPosition
  • Available values: Above, Below, Left, Right
  • Usage: spinner.Position = Spinner.LabelPosition.Left;

• Size
  Gets or sets the spinner's size.
  • Type: Spinner.CircleSize
  • Available values: XSmall, Small, Medium, Large
  • Usage: spinner.Size = Spinner.CircleSize.Large;

• Text
  Gets or sets the label text of the spinner.
  • Type: string
  • Usage: spinner.Text = "Processing...";

This sample demonstrates setting different spinner sizes using the fluent interface.

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

public class SpinnerSizesSample : IComponent
{
    public HTMLElement Render()
    {
        return SectionStack()
            .Title(TextBlock("Spinner Sizes Demo"))
            .Section(Stack().Children(
                Label("Extra small spinner").SetContent(Spinner().XSmall()).AlignCenter(),
                Label("Small spinner").SetContent(Spinner().Small()).AlignCenter(),
                Label("Medium spinner").SetContent(Spinner().Medium()).AlignCenter(),
                Label("Large spinner").SetContent(Spinner().Large()).AlignCenter()
            ))
            .Render();
    }
}

This sample shows how to position the spinner's label in different orientations around the spinner.

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

public class SpinnerLabelPositionSample : IComponent
{
    public HTMLElement Render()
    {
        return SectionStack()
            .Title(TextBlock("Spinner Label Positioning"))
            .Section(Stack().Children(
                Label("Spinner with label positioned below").SetContent(Spinner("Loading...").Below()),
                Label("Spinner with label positioned above").SetContent(Spinner("Loading...").Above()),
                Label("Spinner with label positioned to right").SetContent(Spinner("Loading...").Right()),
                Label("Spinner with label positioned to left").SetContent(Spinner("Loading...").Left())
            ))
            .Render();
    }
}

• ProgressIndicator
• ProgressModal
• Spinner Demo