Tesserae - Progress Indicator

Progress Indicator

Description

The ProgressIndicator is a UI component used to visually represent the completion status of an operation when the total units of work are known. It displays a horizontal progress bar that updates based on a percentage value. If the progress cannot be determined, the component can be set to an "indeterminate" state, where continuous animation is shown instead of a finite progress percentage. Use this component to provide users with a visual indication of progress in long-running operations.

Usage

The component is instantiated using the fluent API provided by the Tesserae UI static class. You can create a new ProgressIndicator and configure it to show either a determinate progress value (by setting a percentage) or an indeterminate state.

Below is an example of how to instantiate and update the progress indicator:

progress-indicator-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new ProgressIndicatorExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class ProgressIndicatorExample : IComponent
    {
        public HTMLElement Render()
        {
            // Creating a progress indicator with various states
            var progressEmpty = ProgressIndicator().Progress(0).Width(400.px());
            var progressThirty = ProgressIndicator().Progress(30).Width(400.px());
            var progressSixty = ProgressIndicator().Progress(60).Width(400.px());
            var progressFull = ProgressIndicator().Progress(100).Width(400.px());
            var progressIndeterminate = ProgressIndicator().Indeterminated().Width(400.px());

            // Arrange components vertically with labels (using ready functions from Tesserae.UI)
            return Stack().Children(
                Label("Empty").SetContent(progressEmpty).AlignCenter(),
                Label("30%").SetContent(progressThirty).AlignCenter(),
                Label("60%").SetContent(progressSixty).AlignCenter(),
                Label("Full").SetContent(progressFull).AlignCenter(),
                Label("Indeterminate").SetContent(progressIndeterminate).AlignCenter()
            ).Render();
        }
    }
}

API reference

class

ProgressIndicator

public class ProgressIndicator : IComponent, IHasForegroundColor

A horizontal progress bar with optional label and either determinate or indeterminate state.

Namespace: Tesserae
Implements: IComponent, IHasForegroundColor

Constructors

Name	Description
ProgressIndicator	Initializes a new instance of this class.

Constructor

ProgressIndicator

public ProgressIndicator()

Initializes a new instance of this class.

Properties

Name	Description
Foreground	Gets or sets the CSS color (foreground) of the component.

Property

ProgressIndicator.Foreground

public string Foreground { get ; set ; }

Gets or sets the CSS color (foreground) of the component.

Methods

Name	Description
Progress	Configures the component to progress.
Indeterminated	Configures the component to indeterminated.
AI	Paints the bar with the AI gradient - a model working through something, determinate or not.
Render	Renders the component's root HTML element.

Method

ProgressIndicator.Progress

Overload
Progress(int, int)	Configures the component to progress.
Progress(float)	Configures the component to progress.

Progress(int, int)

public ProgressIndicator Progress(int position, int total)

Configures the component to progress.

Parameters

position int
total int

Progress(float)

public ProgressIndicator Progress(float percent)

Configures the component to progress.

Parameters

percent float

Method

ProgressIndicator.Indeterminated

public ProgressIndicator Indeterminated()

Configures the component to indeterminated.

Method

ProgressIndicator.AI

public ProgressIndicator AI(bool value = true, bool strongEffect = false)

Paints the bar with the AI gradient - a model working through something, determinate or not.

Parameters

strongEffect: Asks for the louder form of the AI styling. A custom theme that tones the AI look down (e.g. Tesserae.Themes.Curiosity) brings more of it back for this element; the default theme draws both forms the same today. Sets the tss-ai-strong class.

Method

ProgressIndicator.Render

public HTMLElement Render()

Renders the component's root HTML element.

Samples

Displaying Various Progress States

This sample shows how to create and render multiple instances of the ProgressIndicator component in various states including determinate progress and an indeterminate state.

progress-indicator-2-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new ProgressIndicatorDemo();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class ProgressIndicatorDemo : IComponent
    {
        public HTMLElement Render()
        {
            // Create progress indicators with different progress values
            var progressEmpty = ProgressIndicator().Progress(0).Width(400.px());
            var progressThirty = ProgressIndicator().Progress(30).Width(400.px());
            var progressSixty = ProgressIndicator().Progress(60).Width(400.px());
            var progressFull = ProgressIndicator().Progress(100).Width(400.px());
            var progressIndeterminate = ProgressIndicator().Indeterminated().Width(400.px());

            // Combine the indicators with labels inside a vertically stacked container
            return Stack().Children(
                Label("Empty").SetContent(progressEmpty).AlignCenter(),
                Label("30%").SetContent(progressThirty).AlignCenter(),
                Label("60%").SetContent(progressSixty).AlignCenter(),
                Label("Full").SetContent(progressFull).AlignCenter(),
                Label("Indeterminate").SetContent(progressIndeterminate).AlignCenter()
            ).Render();
        }
    }
}

Progress Indicator

Description

Usage

API reference

Constructors

ProgressIndicator

Properties

ProgressIndicator.Foreground

Methods

ProgressIndicator.Progress

Progress(int, int)

Parameters

Progress(float)

Parameters

ProgressIndicator.Indeterminated

ProgressIndicator.AI

Parameters

ProgressIndicator.Render

Samples

Displaying Various Progress States

See also