Tesserae - Progress Modal

ProgressModal

Description

ProgressModal is a modal dialog component designed for displaying progress information in a blocking UI overlay. It is part of the Progress group and is ideal when you need to inform users about ongoing processes—whether they are percentage-based or indeterminate. The component supports dynamic messages, switching between a spinner and a progress indicator, and cancellation actions.

Usage

You can instantiate the ProgressModal using the static helper method from Tesserae.UI. This example demonstrates creating a progress modal with a title, a dynamic message, and a cancel button:

progress-modal-sample.cs

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 ProgressModalExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class ProgressModalExample : IComponent
    {
        public HTMLElement Render()
        {
            return Button("Show progress modal").Primary().OnClick(async (s, e) =>
            {
                // Create a progress modal with a title.
                var modal = ProgressModal()
                    .Title("Processing")
                    .Message("Preparing...")
                    .ProgressSpin();

                // Optional: add a cancel button with a custom action.
                modal.WithCancel((button) =>
                {
                    // Handle cancellation logic.
                    console.log("Cancellation requested.");
                });

                // Display the modal.
                modal.Show();

                // Simulate progress updates.
                for (int i = 0; i <= 100; i += 10)
                {
                    await Task.Delay(500);
                    modal.Progress(i).Message($"Processing {i}%");
                }

                // Optionally, switch to indeterminate mode before hiding.
                modal.ProgressIndeterminated().Message("Finalizing...");
                await Task.Delay(2000);
                modal.Hide();
            }).Render();
        }
    }
}

API reference

class

ProgressModal

public class ProgressModal

A modal that shows a progress bar while a long-running operation completes, with optional cancel button.

Namespace: Tesserae

Constructors

Name	Description
ProgressModal	Initializes a new instance of this class.

Constructor

ProgressModal

public ProgressModal()

Initializes a new instance of this class.

Methods

Name	Description
Show	Shows the component.
ShowEmbedded	Shows the embedded.
Hide	Hides the component.
Message	Configures the component to message.
Title	Gets or sets the title of the component.
Progress	Configures the component to progress.
ProgressIndeterminated	Configures the progress indeterminated on the component.
ProgressSpin	Configures the progress spin on the component.
WithCancel	Returns the component configured with the given cancel.

Method

ProgressModal.Show

public ProgressModal Show()

Shows the component.

Method

ProgressModal.ShowEmbedded

public IComponent ShowEmbedded()

Shows the embedded.

Method

ProgressModal.Hide

public ProgressModal Hide()

Hides the component.

Method

ProgressModal.Message

Overload
Message(string)	Configures the component to message.
Message(IComponent)	Configures the component to message.

Message(string)

public ProgressModal Message(string message)

Configures the component to message.

Parameters

message string

Message(IComponent)

public ProgressModal Message(IComponent message)

Configures the component to message.

Parameters

message IComponent

Method

ProgressModal.Title

Overload
Title(string)	Gets or sets the title of the component.
Title(IComponent)	Gets or sets the title of the component.

Title(string)

public ProgressModal Title(string title)

Gets or sets the title of the component.

Parameters

title string

Title(IComponent)

public ProgressModal Title(IComponent title)

Gets or sets the title of the component.

Parameters

title IComponent

Method

ProgressModal.Progress

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

Progress(float)

public ProgressModal Progress(float percent)

Configures the component to progress.

Parameters

percent float

Progress(int, int)

public ProgressModal Progress(int position, int total)

Configures the component to progress.

Parameters

position int
total int

Method

ProgressModal.ProgressIndeterminated

public ProgressModal ProgressIndeterminated()

Configures the progress indeterminated on the component.

Method

ProgressModal.ProgressSpin

public ProgressModal ProgressSpin()

Configures the progress spin on the component.

Method

ProgressModal.WithCancel

public ProgressModal WithCancel(Action<Button> onCancel, Action<Button> btnCancel = null)

Returns the component configured with the given cancel.

Samples

Basic Usage Sample

In this sample, the ProgressModal is displayed with dynamic updates and a cancel button. The modal starts with a spinner, updates to show percentage-based progress, and finally switches to an indeterminate state before hiding.

progress-modal-2-sample.cs

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 ProgressModalUsageSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class ProgressModalUsageSample : IComponent
    {
        public HTMLElement Render()
        {
            return Button("Start upload").Primary().OnClick(async (s, e) =>
            {
                // Instantiate the progress modal.
                var modal = ProgressModal()
                    .Title("Data Upload")
                    .Message("Starting upload...")
                    .ProgressSpin();

                // Set up a cancel button.
                modal.WithCancel((button) =>
                {
                    console.log("User clicked cancel.");
                    modal.Hide();
                });

                modal.Show();

                // Simulate progress updates.
                for (int progress = 0; progress <= 100; progress += 20)
                {
                    await Task.Delay(500);
                    modal.Progress(progress).Message($"Uploading {progress}%");
                }

                // Switch to indeterminate progress before completion.
                modal.ProgressIndeterminated().Message("Finishing upload...");
                await Task.Delay(2000);
                modal.Hide();
            }).Render();
        }
    }
}

ProgressModal

Description

Usage

API reference

Constructors

ProgressModal

Methods

ProgressModal.Show

ProgressModal.ShowEmbedded

ProgressModal.Hide

ProgressModal.Message

Message(string)

Parameters

Message(IComponent)

Parameters

ProgressModal.Title

Title(string)

Parameters

Title(IComponent)

Parameters

ProgressModal.Progress

Progress(float)

Parameters

Progress(int, int)

Parameters

ProgressModal.ProgressIndeterminated

ProgressModal.ProgressSpin

ProgressModal.WithCancel

Samples

Basic Usage Sample

See also