Progress Button

Overview

Progress Button extends Interactive and provides a hold-to-complete button experience with visual progress feedback. It manages multiple visual states (Normal, InProgress, Complete) with smooth transitions, animated progress fills, and comprehensive event hooks for tracking user interaction throughout the hold duration.

Customization

Progress Behavior

Configure how long users must hold the button and how quickly it resets. The progress and reset curves allow you to create custom acceleration patterns for a more engaging feel.

Completion Mode

Choose whether the button stays in the complete state or automatically resets after completion. This is useful for confirmations that need to persist versus actions that should reset immediately.

Visual States

The component uses three separate CanvasGroups (Normal, InProgress, Complete) that can each contain different visual elements. These states transition smoothly with configurable scale or slide animations.

Progress Fill

Customize the progress indicator's fill method, origin, and direction. Supports horizontal, vertical, and radial fill patterns to match your UI design.

Interactive Features

As a child of Interactive, Progress Button supports:

Interaction states
Ripple and trail effects
Audio styling
Highlight, pressed, and selected transitions

For more information, see the Interactive page.

Properties

Progress Settings

Name	Type	Description
`holdDuration`	`float`	Time required to complete the progress
`resetDuration`	`float`	Time taken to reset progress back to zero
`progressCurve`	`AnimationCurve`	Curve applied to progress fill animation
`resetCurve`	`AnimationCurve`	Curve applied to reset animation

Completion Settings

Name	Type	Description
`stayOnComplete`	`bool`	If true, button remains in complete state without auto-reset
`completeStateDuration`	`float`	Duration to display complete state before resetting

Progress Indicator

Name	Type	Description
`progressFill`	`Image`	Image component used to display fill progress
`fillMethod`	`Image.FillMethod`	Fill method for the progress indicator
`fillOrigin`	`FillOrigin`	Starting point for the fill animation
`clockwise`	`bool`	Direction of radial fill

State Animation

Name	Type	Description
`progressTransitionDuration`	`float`	Time for transitioning between states
`animationType`	`AnimationType`	Type of transition (None, Scale, Slide)
`animationCurve`	`AnimationCurve`	Curve for state transition easing
`scaleFrom`	`float`	Starting scale value for scale animation
`slideOffset`	`Vector2`	Offset distance for slide animation

Canvas Group States

Name	Type	Description
`normalStateCG`	`CanvasGroup`	Visual state when button is idle
`inProgressStateCG`	`CanvasGroup`	Visual state during hold progress
`completeStateCG`	`CanvasGroup`	Visual state when progress is complete

Events

Name	Type	Description
`onProgressStart`	`UnityEvent`	Fired when user begins holding
`onProgressUpdate`	`UnityEvent<float>`	Fired continuously with progress value (0-1)
`onComplete`	`UnityEvent`	Fired when hold duration is reached
`onCancel`	`UnityEvent`	Fired when hold is interrupted

Public Methods

Name	Parameters	Description
`StartProgress()`	None	Begins the progress sequence
`CancelProgress()`	None	Interrupts and resets the progress
`CompleteProgress()`	None	Immediately completes the progress
`ResetProgress(instant)`	`bool`	Resets progress with optional instant transition
`SetProgress(progress)`	`float`	Manually sets progress value (0-1)

Code Example

ProgressButtonExample.cs

using UnityEngine;
using Evo.UI;

public class ProgressButtonExample : MonoBehaviour
{
    public ProgressButton deleteButton;

    void Start()
    {
        // Configure hold duration
        deleteButton.holdDuration = 2f;
        deleteButton.resetDuration = 0.5f;

        // Configure completion behavior
        deleteButton.stayOnComplete = false;
        deleteButton.completeStateDuration = 1f;

        // Configure animation
        deleteButton.animationType = ProgressButton.AnimationType.Scale;
        deleteButton.progressTransitionDuration = 0.2f;

        // Add event listeners
        deleteButton.onProgressStart.AddListener(() =>
        {
            Debug.Log("User started holding button");
        });

        deleteButton.onProgressUpdate.AddListener(progress =>
        {
            Debug.Log($"Progress: {progress * 100}%");
        });

        deleteButton.onComplete.AddListener(() =>
        {
            Debug.Log("Action confirmed!");
            PerformDeletion();
        });

        deleteButton.onCancel.AddListener(() =>
        {
            Debug.Log("Action cancelled");
        });

        // Programmatic control
        // deleteButton.StartProgress();
        // deleteButton.CancelProgress();
        // deleteButton.SetProgress(0.5f);
    }

    void PerformDeletion()
    {
        // Your deletion logic here
    }
}

On this page