dioxus_bootstrap_css/
spinner.rs

1use dioxus::prelude::*;
2
3use crate::types::{Color, Size, SpinnerStyle};
4
5/// Bootstrap Spinner (loading indicator) component.
6///
7/// # Bootstrap HTML → Dioxus
8///
9/// | HTML | Dioxus |
10/// |---|---|
11/// | `<div class="spinner-border">` | `Spinner {}` |
12/// | `<div class="spinner-grow text-success">` | `Spinner { style: SpinnerStyle::Grow, color: Color::Success }` |
13/// | `<div class="spinner-border spinner-border-sm">` | `Spinner { size: Size::Sm }` |
14///
15/// ```rust,no_run
16/// rsx! {
17///     Spinner {}
18///     Spinner { color: Color::Success, style: SpinnerStyle::Grow }
19///     Spinner { size: Size::Sm, "Loading..." }
20/// }
21/// ```
22#[derive(Clone, PartialEq, Props)]
23pub struct SpinnerProps {
24    /// Spinner color.
25    #[props(default)]
26    pub color: Option<Color>,
27    /// Spinner size.
28    #[props(default)]
29    pub size: Size,
30    /// Spinner style (border or grow).
31    #[props(default)]
32    pub style: SpinnerStyle,
33    /// Additional CSS classes.
34    #[props(default)]
35    pub class: String,
36    /// Screen reader text (child elements).
37    #[props(default)]
38    pub children: Element,
39}
40
41#[component]
42pub fn Spinner(props: SpinnerProps) -> Element {
43    let base = match props.style {
44        SpinnerStyle::Border => "spinner-border",
45        SpinnerStyle::Grow => "spinner-grow",
46    };
47
48    let size_class = match props.size {
49        Size::Sm => format!(" {base}-sm"),
50        _ => String::new(),
51    };
52
53    let color_class = match &props.color {
54        Some(c) => format!(" text-{c}"),
55        None => String::new(),
56    };
57
58    let full_class = if props.class.is_empty() {
59        format!("{base}{size_class}{color_class}")
60    } else {
61        format!("{base}{size_class}{color_class} {}", props.class)
62    };
63
64    rsx! {
65        div {
66            class: "{full_class}",
67            role: "status",
68            span { class: "visually-hidden", {props.children} }
69        }
70    }
71}
dioxus_bootstrap_css/spinner.rs

dioxus_bootstrap_css/
spinner.rs
