Dioxus Componentsdioxus

Installation

Use the CLI command for the common path, or copy the component files manually.

Manual installation files

Copy the component source and CSS into your app. Import the shared theme CSS once near your app root.

use dioxus::prelude::*;
use dioxus_primitives::progress::{self, ProgressProps};

#[component]
pub fn Progress(props: ProgressProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/progress/style.css") }
        progress::Progress {
            class: "dx-progress",
            value: props.value,
            max: props.max,
            attributes: props.attributes,
            progress::ProgressIndicator { class: "dx-progress-indicator" }
        }
    }
}

Usage notes

The Progress component is used to display the progress of a task or operation. It can be used to indicate loading states, file uploads, or any other process that takes time to complete.

Component Structure

Progress {
    // The current progress value (0 to max
    value: 0.5,
    // The maximum value of the progress (default is 100.0)
    max: 1.0,
    // Elements that will be displayed inside the progress bar
    {children}
}