Tesserae - Spinner

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:

spinner-sample.js

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);
        }
    }
}

API reference

class

Spinner

public class Spinner : ComponentBase<Spinner, HTMLDivElement>

A spinner component used to indicate loading states.

Constructors

Constructor

Spinner

public Spinner(string text = string.Empty)

Initializes a new instance of the class.

Parameters

text: The label text.

Properties

Property

Spinner.Position

public LabelPosition Position { get ; set ; }

Gets or sets the position of the label.

Property

Spinner.Size

public CircleSize Size { get ; set ; }

Gets or sets the size of the spinner.

Property

Spinner.Text

public string Text { get ; set ; }

Gets or sets the label text.

Methods

Method

Spinner.Success

public Spinner Success()

Sets the spinner to indicate success.

Returns

The current instance.

Method

Spinner.Danger

public Spinner Danger()

Sets the spinner to indicate danger/error.

Returns

The current instance.

Method

Spinner.Primary

public Spinner Primary()

Sets the spinner to the primary color.

Returns

The current instance.

Method

Spinner.CustomColor

public Spinner CustomColor(string color)

Configures the custom color on the component.

Method

Spinner.Progress

public Spinner Progress(int position, int total)

Sets the progress position (between 0 and total).

Parameters

position: The current position.
total: The total amount.

Returns

The current instance.

Method

Spinner.Progress

public Spinner Progress(float percent)

Sets the progress percentage (between 0 and 100).

Parameters

percent: The percentage.

Returns

The current instance.

Method

Spinner.Indeterminate

public Spinner Indeterminate()

Sets the spinner back to the normal indeterminate state.

Returns

The current instance.

Method

Spinner.Render

public override HTMLElement Render()

Renders the component.

Returns

The rendered HTML element.

Method

Spinner.Left

public Spinner Left()

Sets the label position to left.

Method

Spinner.Right

public Spinner Right()

Sets the label position to right.

Method

Spinner.Above

public Spinner Above()

Sets the label position to above.

Method

Spinner.Below

public Spinner Below()

Sets the label position to below.

Method

Spinner.XSmall

public Spinner XSmall()

Sets the size to extra small.

Method

Spinner.Small

public Spinner Small()

Sets the size to small.

Method

Spinner.Medium

public Spinner Medium()

Sets the size to medium.

Method

Spinner.Large

public Spinner Large()

Sets the size to large.

Method

Spinner.SetText

public Spinner SetText(string text)

Sets the label text.

Parameters

text: The text.

Returns

The current instance.

Samples

Various Spinner Sizes

spinner-2-sample.js

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

spinner-3-sample.js

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);
        }
    }
}

Spinner

Description

Usage

API reference

Constructors

Spinner

Parameters

Properties

Spinner.Position

Spinner.Size

Spinner.Text

Methods

Spinner.Success

Returns

Spinner.Danger

Returns

Spinner.Primary

Returns

Spinner.CustomColor

Spinner.Progress

Parameters

Returns

Spinner.Progress

Parameters

Returns

Spinner.Indeterminate

Returns

Spinner.Render

Returns

Spinner.Left

Spinner.Right

Spinner.Above

Spinner.Below

Spinner.XSmall

Spinner.Small

Spinner.Medium

Spinner.Large

Spinner.SetText

Parameters

Returns

Samples

Various Spinner Sizes

Spinner with Label Positioning

See also

Referenced by