Progress

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

This component is not yet updated to Leptos 0.7+.

Features

Provides context for assistive technology to read the progress of a task.

Installation

Install the component from your command line.

cargo add radix-leptos-progress

Anatomy

Import all parts and piece them together.

use leptos::*;
use radix_leptos_progress::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <Progress>
            <ProgressIndicator />
        </Progress>
    }
}

API Reference

Root

Contains all of the progress parts.

Prop	Type	Default
`as_child`	`MaybeProp<bool>`	`false`
`value`	`MaybeProp<f64>`	-
`max`	`MaybeProp<f64>`	`100.0`
`get_value_label`	`Option<Callback<(f64, f64), String>>`	-

Data attribute	Values
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	The current value
`[data-max]`	The max value

Indicator

Used to show the progress visually. It also makes progress accessible to assistive technologies.

Prop	Type	Default
`as_child`	`MaybeProp<bool>`	`false`

Data attribute	Values
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	The current value
`[data-max]`	The max value

Accessibility

Adheres to the progressbar role requirements.

Rust Radix