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_icons::lucide::LoaderCircle;

/// A loading indicator: a continuously rotating ring icon. Renders
/// `role="status"` with an accessible name (default `"Loading"`, overridable
/// via `label`) so assistive tech announces the busy state -- there is no
/// ARIA widget pattern beyond that live-region role, so no primitive
/// underneath.
#[component]
pub fn Spinner(
    /// The accessible name announced for the loading state.
    #[props(default = "Loading".to_string())]
    label: String,
    #[props(extends = GlobalAttributes)] attributes: Vec<Attribute>,
) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/spinner/style.css") }
        span {
            class: "dx-spinner",
            role: "status",
            "aria-label": "{label}",
            ..attributes,
            LoaderCircle {}
        }
    }
}

Usage notes

The Spinner component is a continuously rotating loading indicator. It renders role="status" with an accessible name so assistive technology announces the busy state.

Component Structure

Spinner {
    // The accessible name announced for the loading state. Defaults to "Loading".
    label: "Saving",
}