leptos-shadcn-ui/docs/components/api/progress.md

Progress Component API

A progress indicator component for showing completion status.

---

Installation

# Cargo.toml
[dependencies]
shadcn-ui-leptos-progress = "0.7"

use shadcn_ui_leptos_progress::Progress;

---

Component API

Progress

Prop	Type	Default	Description
value	Signal<f64>	Required	Progress value (0-100)
max	MaybeProp<f64>	100	Maximum value
class	MaybeProp<String>	None	Additional CSS classes
id	MaybeProp<String>	None	Unique identifier

---

Usage Examples

Basic Progress

use leptos::prelude::*;
use shadcn_ui_leptos_progress::Progress;

#[component]
pub fn MyComponent() -> impl IntoView {
    let (progress, set_progress) = signal(66.0);

    view! {
        <div class="space-y-2">
            <Progress value=progress.into() />
            <p>{format!("{}% complete", progress.get())}</p>
        </div>
    }
}

Indeterminate Progress

view! {
    <Progress value=Signal::derive(|| 0.0) class="animate-pulse" />
}

---

CSS Classes

.progress-root {
    relative h-4 w-full overflow-hidden rounded-full
    bg-secondary
}

.progress-indicator {
    h-full w-full flex-1 bg-primary
    transition-all
}

---

Accessibility

ARIA Attributes

• role="progressbar" - Progress bar role
• aria-valuenow - Current value
• aria-valuemin - Minimum value (0)
• aria-valuemax - Maximum value
• aria-label - Accessible label

---

TypeScript API

interface ProgressProps {
  value: number;
  max?: number;
  className?: string;
  id?: string;
}

export const Progress: React.FC<ProgressProps>;

---

Source: packages/leptos/progress/src/default.rs