Progress

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


use std::time::Duration;

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

#[component]
pub fn ProgressDemo() -> impl IntoView {
    let (progress, set_progress) = create_signal(13.0);

    let handle = set_timeout_with_handle(
        move || {
            set_progress.set(66.0);
        },
        Duration::from_millis(500),
    )
    .expect("Timeout should be started.");

    on_cleanup(move || handle.clear());

    view! {
        <Progress
            attr:class="relative overflow-hidden bg-blackA6 rounded-full w-[300px] h-[25px]"
            // Fix overflow clipping in Safari
            // https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0
            attr:style="transform: translateZ(0)"
            value=progress
        >
            <ProgressIndicator
                attr:class="bg-white w-full h-full transition-transform duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]"
                attr:style=move || format!("transform: translateX(-{}%)", 100.0 - progress.get())
            />
        </Progress>
    }
}

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