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.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 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.

Constructors

Constructor

ProgressIndicator

public ProgressIndicator()

Initializes a new instance of this class.

Properties

Property

ProgressIndicator.Foreground

public string Foreground { get ; set ; }

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

Methods

Method

ProgressIndicator.Progress

public ProgressIndicator Progress(int position, int total)

Configures the component to progress.

Method

ProgressIndicator.Progress

public ProgressIndicator Progress(float percent)

Configures the component to progress.

Method

ProgressIndicator.Indeterminated

public ProgressIndicator Indeterminated()

Configures the component to indeterminated.

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.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 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

ProgressIndicator

Constructors

ProgressIndicator

Properties

ProgressIndicator.Foreground

Methods

ProgressIndicator.Progress

ProgressIndicator.Progress

ProgressIndicator.Indeterminated

ProgressIndicator.Render

Samples

Displaying Various Progress States

See also

Referenced by