Function Progress

primitives/src/progress.rs:54–83

(props: ProgressProps)

/// - `--progress-value`: A value between 0 and 100 representing the current progress percentage.
#[component]
pub fn Progress(props: ProgressProps) -> Element {
    // Calculate percentage for styling and "data-state"
    let percentage = use_memo(move || {
        props.value.cloned().map(|v| {
            let max = (props.max)();
            (v / max) * 100.0
        })
    });

    let state = use_memo(move || match percentage() {
        Some(_) => "loading",
        None => "indeterminate",
    });

    rsx! {
        div {
            role: "progressbar",
            "aria-valuemin": 0,
            "aria-valuemax": props.max,
            "aria-valuenow": props.value.cloned(),
            "data-state": state,
            "data-value": props.value.cloned().map(|v| v.to_string()),
            "data-max": props.max,
            style: percentage().map(|p| format!("--progress-value: {p}%")),
            ..props.attributes,

            {props.children}
        }
    }
}

/// The props for the [`ProgressIndicator`] component.
#[derive(Props, Clone, PartialEq)]