Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Volume Control

Adjust system volume

Installation

CLI

Install the component using the StarUI CLI:

star add progress

Examples

File Upload

Multiple file upload with individual and total progress

Upload Progress

Uploading 3 files

document.pdf

2.4 MB

Complete

photo.jpg

1.8 MB

% • 1.2 MB of 1.8 MB

video.mp4

45.2 MB

% • 12.6 MB of 45.2 MB • ~2 min remaining

Total: 49.4 MB

from starhtml import *
from starui import *

file1 = Signal("file1", 100)
file2 = Signal("file2", 65)
file3 = Signal("file3", 28)
total = Signal("total", 54)

Card(
    CardHeader(
        CardTitle("Upload Progress"),
        CardDescription("Uploading 3 files")
    ),
    CardContent(
        Div(
            file1, file2, file3, total,
            Div(
                Div(
                    Icon("lucide:file-text", cls="h-4 w-4 text-muted-foreground"),
                    P("document.pdf", cls="font-medium flex-1 ml-3"),
                    P("2.4 MB", cls="text-sm text-muted-foreground"),
                    cls="flex items-center mb-2"
                ),
                Progress(signal=file1),
                Div(
                    Icon("lucide:check-circle", cls="h-4 w-4 text-green-500"),
                    P("Complete", cls="text-sm text-green-500"),
                    cls="flex items-center gap-1 mt-1"
                ),
                cls="pb-3"
            ),
            Separator(cls="my-3"),
            Div(
                Div(
                    Icon("lucide:image", cls="h-4 w-4 text-muted-foreground"),
                    P("photo.jpg", cls="font-medium flex-1 ml-3"),
                    P("1.8 MB", cls="text-sm text-muted-foreground"),
                    cls="flex items-center mb-2"
                ),
                Progress(signal=file2),
                P(
                    Span(data_text=file2.round(), cls="font-mono"),
                    "% • 1.2 MB of 1.8 MB",
                    cls="text-sm text-muted-foreground mt-1"
                ),
                cls="pb-3"
            ),
            Separator(cls="my-3"),
            Div(
                Div(
                    Icon("lucide:video", cls="h-4 w-4 text-muted-foreground"),
                    P("video.mp4", cls="font-medium flex-1 ml-3"),
                    P("45.2 MB", cls="text-sm text-muted-foreground"),
                    cls="flex items-center mb-2"
                ),
                Progress(signal=file3),
                P(
                    Span(data_text=file3.round(), cls="font-mono"),
                    "% • 12.6 MB of 45.2 MB • ",
                    Span("~2 min remaining", cls="text-blue-500"),
                    cls="text-sm text-muted-foreground mt-1"
                ),
                cls="pb-3"
            ),
            Div(
                P("Total: 49.4 MB", cls="text-sm font-medium mb-2"),
                Progress(signal=total, cls="h-3"),
                cls="pt-3 border-t"
            )
        )
    ),
    cls="max-w-lg"
)

Animated Loading

Multi-step loading with animated progress

System Initialization

Starting up services

from starhtml import *
from starui import *

loading_step = Signal("loading_step", 0)
loading_progress = Signal("loading_progress", 0)
is_loading = Signal("is_loading", False)

def simulate_loading():
    steps = [(1, 20), (2, 40), (3, 60), (4, 80), (5, 100)]
    return [
        is_loading.set(True),
        *[set_timeout(seq(loading_step.set(step), loading_progress.set(progress)), i * 1000)
          for i, (step, progress) in enumerate(steps)],
        set_timeout(seq(loading_step.set(0), loading_progress.set(0), is_loading.set(False)), 5000)
    ]

Card(
    CardHeader(
        CardTitle("System Initialization"),
        CardDescription("Starting up services")
    ),
    CardContent(
        Div(
            loading_step, loading_progress, is_loading,
            Div(
                P(
                    data_text=switch([
                        (loading_step == 0, "Ready to start"),
                        (loading_step == 1, "Initializing database..."),
                        (loading_step == 2, "Loading configuration..."),
                        (loading_step == 3, "Connecting to services..."),
                        (loading_step == 4, "Verifying credentials..."),
                        (loading_step == 5, "System ready!")
                    ]),
                    cls="text-sm font-medium mb-2"
                ),
                Progress(signal=loading_progress, cls="h-2"),
                P(
                    data_text=is_loading.if_(
                        "Step " + loading_step + " of 5",
                        "Click 'Start' to begin"
                    ),
                    cls="text-sm text-muted-foreground mt-2"
                )
            ),
            Button(
                data_text=is_loading.if_("Loading...", "Start Loading"),
                data_on_click=simulate_loading(),
                data_attr_disabled=is_loading,
                variant="outline",
                size="sm",
                cls="mt-4"
            )
        )
    ),
    cls="w-full max-w-xl"
)

Download Manager

Download progress with pause/resume and cancel

Download Manager

Active downloads

StarUI-v2.0.zip

125 MB

node_modules.tar.gz

892 MB

from starhtml import *
from starui import *

download1 = Signal("download1", 42)
download1_paused = Signal("download1_paused", False)
download2 = Signal("download2", 78)

Card(
    CardHeader(
        CardTitle("Download Manager"),
        CardDescription("Active downloads")
    ),
    CardContent(
        Div(
            download1, download1_paused, download2,
            Div(
                Div(
                    Icon("lucide:download", cls="h-5 w-5 text-blue-500"),
                    Div(
                        P("StarUI-v2.0.zip", cls="font-medium"),
                        P("125 MB", cls="text-xs text-muted-foreground"),
                        cls="flex-1 ml-3"
                    ),
                    Button(
                        Icon("lucide:play", cls="h-4 w-4", data_show=download1_paused),
                        Icon("lucide:pause", cls="h-4 w-4", data_show=~download1_paused),
                        data_on_click=download1_paused.toggle(),
                        variant="ghost",
                        size="sm",
                        aria_label=download1_paused.if_("Resume", "Pause")
                    ),
                    cls="flex items-center mb-2"
                ),
                Progress(signal=download1, cls="h-3"),
                Div(
                    Div(
                        Span(data_text=download1.round(), cls="font-semibold"),
                        "%",
                        cls="flex items-center gap-1"
                    ),
                    P(
                        data_text=download1_paused.if_("Paused", "~30s remaining"),
                        cls="text-sm text-muted-foreground"
                    ),
                    cls="flex justify-between items-center mt-2"
                ),
                cls="p-4 border rounded-lg"
            ),
            Div(
                Div(
                    Icon("lucide:download", cls="h-5 w-5 text-blue-500"),
                    Div(
                        P("node_modules.tar.gz", cls="font-medium"),
                        P("892 MB", cls="text-xs text-muted-foreground"),
                        cls="flex-1 ml-3"
                    ),
                    Button(
                        Icon("lucide:x", cls="h-4 w-4"),
                        data_on_click=download2.set(0),
                        variant="ghost",
                        size="sm",
                        aria_label="Cancel download"
                    ),
                    cls="flex items-center mb-2"
                ),
                Progress(signal=download2, cls="h-3"),
                Div(
                    Div(
                        Span(data_text=download2.round(), cls="font-semibold"),
                        "%",
                        cls="flex items-center gap-1"
                    ),
                    P(
                        data_text=(download2 > 0).if_("~38s remaining", "Cancelled"),
                        cls="text-sm text-muted-foreground"
                    ),
                    cls="flex justify-between items-center mt-2"
                ),
                data_show=download2 > 0,
                cls="p-4 border rounded-lg"
            ),
            Div(
                P(
                    data_text=(download2 > 0).if_("Queue: 2 files waiting", "Queue: 3 files waiting"),
                    cls="text-sm text-muted-foreground"
                ),
                cls="mt-3"
            ),
            cls="space-y-3"
        )
    ),
    cls="max-w-2xl"
)

Application Metrics

Dashboard showing multiple metrics with helper function and color coding

Application Metrics

Real-time performance monitoring

API Response Time

850 / 1000 ms

85%

Optimal performance

Memory Usage

7.4 / 8 GB

92%

Near capacity

Storage

450 / 1000 GB

45%

DB Connections

12 / 50 active

24%

API Reference

Props

Prop	Type	Default	Description
`value`	`float \| None`	`None`	Initial value in the range [0, max_value]. When omitted with Signal object, uses Signal's initial value.
`max_value`	`float`	`100`	Maximum value that represents 100%
`signal`	`str \| Signal`	`auto-generated`	Signal name or Signal object for reactive updates
`cls`	`str`	`''`	Additional CSS classes (e.g., 'h-2', 'h-3')