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/// # use dioxus::prelude::*;
17/// # use dioxus_bootstrap_css::prelude::*;
18/// # fn _doctest() -> Element {
19/// rsx! {
20///     Spinner {}
21///     Spinner { color: Color::Success, style: SpinnerStyle::Grow }
22///     Spinner { size: Size::Sm, "Loading..." }
23/// }
24/// # }
25/// ```
26#[derive(Clone, PartialEq, Props)]
27pub struct SpinnerProps {
28    /// Spinner color.
29    #[props(default)]
30    pub color: Option<Color>,
31    /// Spinner size.
32    #[props(default)]
33    pub size: Size,
34    /// Spinner style (border or grow).
35    #[props(default)]
36    pub style: SpinnerStyle,
37    /// Additional CSS classes.
38    #[props(default)]
39    pub class: String,
40    /// Any additional HTML attributes.
41    #[props(extends = GlobalAttributes)]
42    attributes: Vec<Attribute>,
43    /// Screen reader text (child elements).
44    #[props(default)]
45    pub children: Element,
46}
47
48#[component]
49pub fn Spinner(props: SpinnerProps) -> Element {
50    let base = match props.style {
51        SpinnerStyle::Border => "spinner-border",
52        SpinnerStyle::Grow => "spinner-grow",
53    };
54
55    let size_class = match props.size {
56        Size::Sm => format!(" {base}-sm"),
57        _ => String::new(),
58    };
59
60    let color_class = match &props.color {
61        Some(c) => format!(" text-{c}"),
62        None => String::new(),
63    };
64
65    let full_class = if props.class.is_empty() {
66        format!("{base}{size_class}{color_class}")
67    } else {
68        format!("{base}{size_class}{color_class} {}", props.class)
69    };
70
71    rsx! {
72        div {
73            class: "{full_class}",
74            role: "status",
75            ..props.attributes,
76            span { class: "visually-hidden", {props.children} }
77        }
78    }
79}
dioxus_bootstrap_css/spinner.rs

dioxus_bootstrap_css/
spinner.rs
