Spinner

Description

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.

Usage

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 System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var spinner = Spinner("Loading, please wait...").Medium();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(spinner);
        }
    }
}

Methods

• 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...");

Properties

• 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...";

Samples

Various Spinner Sizes

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = 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()
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Spinner with Label Positioning

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = 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())
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

See also

• ProgressIndicator
• ProgressModal
• Spinner Demo