Progress

Displays an indicator showing the completion progress of a task.

Default

A progress bar at 33% completion.

Various Values

Progress bars at different completion levels.

0%

25%

50%

75%

100%

Circular

Server-rendered SVG indicators use the same progress semantics and anatomy as the linear form.

Small
Medium
Large

With Label

Progress bar with a percentage label above.

Uploading...66%
Processing...45%
Complete!100%
Open Markdown
FreeProgress

Linear and circular task completion indicators.

Install with the Proa CLI
proa ui add progress

Installs the reviewed component source, dependencies, shared support files, and required legal notices.

CLI and registry setup
recipe.rs
// SPDX-FileCopyrightText: 2026 Proa Labs, Inc.
// SPDX-License-Identifier: MIT OR Apache-2.0

//! Progress recipe — static named slots for the track and indicator.
//!
//! Progress has no visual axes today, but it is still a multipart component:
//! the public component owns the track while the indicator is a distinct
//! styled part. Keeping both slots in one recipe prevents their styling from
//! drifting apart and leaves a typed extension point for future axes.

use crate::tw_join;
use proa_core::shared::attr_value::AttrValue;
use proa_core::{DataLoader, WebContext, WriteBuf, WriteError};

mod base {
    use super::*;

    pub const PROGRESS_TRACK: &str = tw_join!(
        "relative",
        "h-2",
        "w-full",
        "overflow-hidden",

Search

Type at least 2 characters

Customize

Make it yours

Palette

Radius

Overview
Components
Settings

Build your own

Themed Proa UI surface

Preview
Components52
RecipesTyped
customer-portal