leptos_bootstrap/v5/
spinner.rs

1use leptos::prelude::*;
2use std::fmt;
3
4pub enum SpinnerKind {
5    Default,
6    Primary,
7    Secondary,
8    Success,
9    Danger,
10    Warning,
11    Info,
12    Light,
13    Dark,
14}
15
16impl fmt::Display for SpinnerKind {
17    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
18        let s = match self {
19            Self::Default => "",
20            Self::Primary => "text-primary",
21            Self::Secondary => "text-secondary",
22            Self::Success => "text-success",
23            Self::Danger => "text-danger",
24            Self::Warning => "text-warning",
25            Self::Info => "text-info",
26            Self::Light => "text-light",
27            Self::Dark => "text-dark",
28        };
29        write!(f, "{}", s)
30    }
31}
32
33pub enum SpinnerSize {
34    Small,
35    Normal,
36    Large,
37}
38
39impl fmt::Display for SpinnerSize {
40    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
41        let s = match self {
42            Self::Small => "spinner-border-sm",
43            Self::Normal => "",
44            Self::Large => "spinner-border-lg",
45        };
46        write!(f, "{}", s)
47    }
48}
49
50#[component]
51pub fn Spinner<'a>(
52    #[prop(default = SpinnerKind::Default)] kind: SpinnerKind,
53    #[prop(default = SpinnerSize::Normal)] size: SpinnerSize,
54    #[prop(optional, into)] class: &'a str,
55) -> impl IntoView {
56    let class = format!("spinner-border {} {} {}", kind, size, class);
57    view! {
58        <div class=class role="status">
59            <span class="visually-hidden">Loading...</span>
60        </div>
61    }
62}
63
64#[component]
65pub fn GrowingSpinner<'a>(
66    #[prop(default = SpinnerKind::Default)] kind: SpinnerKind,
67    #[prop(default = SpinnerSize::Normal)] size: SpinnerSize,
68    #[prop(optional, into)] class: &'a str,
69) -> impl IntoView {
70    let class = format!("spinner-grow {} {} {}", kind, size, class);
71    view! {
72        <div class=class role="status">
73            <span class="visually-hidden">Loading...</span>
74        </div>
75    }
76}