Tesserae - Progress Ring

ProgressRing

Description

A circular progress indicator

ProgressRing displays progress in a circular donut style. Use it alongside a metric value, in a dashboard card header, or to track quota/usage.

It supports determinate values (0–100), an indeterminate spinning state, and an optional text label in the centre.

API reference

class

ProgressRing

public sealed class ProgressRing : ComponentBase<ProgressRing, HTMLElement>

A circular progress indicator (ring/donut style).

Constructors

Constructor

ProgressRing

public ProgressRing(int size = DefaultSize, int thickness = DefaultThickness)

Initializes a new ProgressRing.

Parameters

size: Diameter in pixels.
thickness: Ring thickness in pixels.

Properties

Property

ProgressRing.Value

public double Value { get ; set ; }

Gets or sets the current progress value.

Property

ProgressRing.Max

public double Max { get ; set ; }

Gets or sets the maximum value (default 100).

Methods

Method

ProgressRing.Progress

public ProgressRing Progress(double current, double total)

Sets progress as percentage 0–100.

Method

ProgressRing.Indeterminate

public ProgressRing Indeterminate(bool value = true)

Shows an indeterminate spinning ring.

Method

ProgressRing.Label

public ProgressRing Label(string text)

Sets the label text shown in the centre of the ring.

Method

ProgressRing.NoLabel

public ProgressRing NoLabel()

Hides the centre label.

Method

ProgressRing.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Samples

Determinate Rings

progress-ring-determinate-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 = HStack().Gap(24.px()).AlignItems(ItemAlign.End).Children(
                VStack().AlignItems(ItemAlign.Center).Children(ProgressRing(64, 6).Progress(25, 100).Label("25%"), TextBlock("25%").Small().MT(8)),
                VStack().AlignItems(ItemAlign.Center).Children(ProgressRing(64, 6).Progress(50, 100).Label("50%"), TextBlock("50%").Small().MT(8)),
                VStack().AlignItems(ItemAlign.Center).Children(ProgressRing(64, 6).Progress(75, 100).Label("75%"), TextBlock("75%").Small().MT(8)),
                VStack().AlignItems(ItemAlign.Center).Children(ProgressRing(64, 6).Progress(100, 100).Label("100%"), TextBlock("100%").Small().MT(8))
            );

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

Sizes

progress-ring-sizes-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 = HStack().Gap(24.px()).AlignItems(ItemAlign.End).Children(
                VStack().AlignItems(ItemAlign.Center).Children(ProgressRing(32, 3).Progress(60, 100),   TextBlock("Small").XSmall().MT(8)),
                VStack().AlignItems(ItemAlign.Center).Children(ProgressRing(48, 4).Progress(60, 100),   TextBlock("Medium").XSmall().MT(8)),
                VStack().AlignItems(ItemAlign.Center).Children(ProgressRing(64, 6).Progress(60, 100),   TextBlock("Large").XSmall().MT(8)),
                VStack().AlignItems(ItemAlign.Center).Children(ProgressRing(96, 8).Progress(60, 100).Label("60%"), TextBlock("XLarge").XSmall().MT(8))
            );

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

Indeterminate (Loading)

progress-ring-indeterminate-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 = HStack().Gap(24.px()).AlignItems(ItemAlign.Center).Children(
                ProgressRing(48, 4).Indeterminate(),
                ProgressRing(64, 6).Indeterminate(),
                ProgressRing(96, 8).Indeterminate().Label("…")
            );

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

Animated Fill

progress-ring-animated-sample.js

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 component = Button("Start 5s countdown").Primary().Var(out var animBtn).OnClick(async () =>
            {
                animBtn.Disabled();
                var liveRing = ProgressRing(64, 6).Label("0%");
                var container = HStack().AlignItems(ItemAlign.Center).Gap(12.px()).Children(liveRing, TextBlock("Processing…").Small());
                Toast().Information(container).Duration(System.TimeSpan.FromSeconds(7));
                for (int i = 1; i <= 5; i++)
                {
                    await Task.Delay(1000);
                    liveRing.Progress(i, 5).Label($"{i * 20}%");
                }
                animBtn.Disabled(false);
            });

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

ProgressRing

Description

API reference

Constructors

ProgressRing

Parameters

Properties

ProgressRing.Value

ProgressRing.Max

Methods

ProgressRing.Progress

ProgressRing.Indeterminate

ProgressRing.Label

ProgressRing.NoLabel

ProgressRing.Render

Samples

Determinate Rings

Sizes

Indeterminate (Loading)

Animated Fill

See also