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    /// Any additional HTML attributes.
37    #[props(extends = GlobalAttributes)]
38    attributes: Vec<Attribute>,
39    /// Screen reader text (child elements).
40    #[props(default)]
41    pub children: Element,
42}
43
44#[component]
45pub fn Spinner(props: SpinnerProps) -> Element {
46    let base = match props.style {
47        SpinnerStyle::Border => "spinner-border",
48        SpinnerStyle::Grow => "spinner-grow",
49    };
50
51    let size_class = match props.size {
52        Size::Sm => format!(" {base}-sm"),
53        _ => String::new(),
54    };
55
56    let color_class = match &props.color {
57        Some(c) => format!(" text-{c}"),
58        None => String::new(),
59    };
60
61    let full_class = if props.class.is_empty() {
62        format!("{base}{size_class}{color_class}")
63    } else {
64        format!("{base}{size_class}{color_class} {}", props.class)
65    };
66
67    rsx! {
68        div {
69            class: "{full_class}",
70            role: "status",
71            ..props.attributes,
72            span { class: "visually-hidden", {props.children} }
73        }
74    }
75}
dioxus_bootstrap_css/spinner.rs

dioxus_bootstrap_css/
spinner.rs
