dioxus_element_plug/components/
loading.rs

1use dioxus::prelude::*;
2
3/// Loading props
4#[derive(Props, Clone, PartialEq)]
5pub struct LoadingProps {
6    #[props(default)]
7    pub children: Option<Element>,
8
9    /// Whether loading is active
10    #[props(default = false)]
11    pub loading: bool,
12
13    /// Loading text
14    #[props(default)]
15    pub text: Option<String>,
16
17    /// Whether to show a fullscreen overlay
18    #[props(default = false)]
19    pub fullscreen: bool,
20
21    /// Background color
22    #[props(default = "rgba(255, 255, 255, 0.9)".to_string())]
23    pub background: String,
24
25    /// Additional CSS classes
26    #[props(default)]
27    pub class: Option<String>,
28
29    /// Inline styles
30    #[props(default)]
31    pub style: Option<String>,
32}
33
34/// Loading component for displaying loading indicators
35#[component]
36pub fn Loading(props: LoadingProps) -> Element {
37    let mut class_names = vec!["el-loading".to_string()];
38    if props.fullscreen { class_names.push("el-loading--fullscreen".to_string()); }
39    if let Some(ref c) = props.class { class_names.push(c.clone()); }
40    let class_string = class_names.join(" ");
41
42    rsx! {
43        div {
44            class: "{class_string}",
45            style: props.style.clone().unwrap_or_default(),
46            {props.children}
47            if props.loading {
48                div {
49                    class: "el-loading__mask",
50                    style: "background-color: {props.background};",
51                    div {
52                        class: "el-loading__spinner",
53                        i { class: "el-icon-loading" }
54                        if let Some(ref text) = props.text {
55                            p { class: "el-loading__text", "{text}" }
56                        }
57                    }
58                }
59            }
60        }
61    }
62}
63
64/// LoadingDirective - standalone loading indicator
65#[derive(Props, Clone, PartialEq)]
66pub struct LoadingDirectiveProps {
67    #[props(default = false)]
68    pub fullscreen: bool,
69
70    #[props(default)]
71    pub text: Option<String>,
72
73    #[props(default)]
74    pub class: Option<String>,
75}
76
77/// LoadingDirective - standalone loading spinner
78#[component]
79pub fn LoadingDirective(props: LoadingDirectiveProps) -> Element {
80    let mut class_names = vec!["el-loading".to_string()];
81    if props.fullscreen { class_names.push("el-loading--fullscreen".to_string()); }
82    if let Some(ref c) = props.class { class_names.push(c.clone()); }
83
84    rsx! {
85        div {
86            class: "{class_names.join(\" \")}",
87            style: "position: relative;",
88            div {
89                class: "el-loading__mask",
90                div {
91                    class: "el-loading__spinner",
92                    i { class: "el-icon-loading" }
93                    if let Some(ref text) = props.text {
94                        p { class: "el-loading__text", "{text}" }
95                    }
96                }
97            }
98        }
99    }
100}
dioxus_element_plug/components/loading.rs

dioxus_element_plug/components/
loading.rs
