Tesserae

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

Methods

ProgressIndicator Progress(float percent)
• Parameters:
- percent (float): A value from 0 to 100 indicating the percentage of completion.
  • Returns:
- The current ProgressIndicator instance to allow for method chaining.
  • Description:
  Updates the progress bar width to the percentage provided and ensures the component is in a determinate state.
ProgressIndicator Progress(int position, int total)
• Parameters:
- position (int): The current progress step.
- total (int): The total number of steps.
  • Returns:
- The current ProgressIndicator instance to allow for method chaining.
  • Description:
  Calculates the percentage based on the position and total steps, then updates the progress bar accordingly.
ProgressIndicator Indeterminated()
• Parameters: None.
• Returns:
- The current ProgressIndicator instance set to indeterminate state. • Description:
  Changes the progress indicator to an indeterminate state, where the progress bar fills continuously.

Properties

string Foreground
• Description:
Gets or sets the foreground color of the progress bar. This property dynamically adjusts the background style of the progress bar depending on whether the component is in determinate or indeterminate mode.

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