✨ feat: add progress component

examples/basic/src/main.rs

@@ -7,15 +7,16 @@ fn main() {
 
 #[component]
 pub fn App(cx: Scope) -> impl IntoView {
-    let (count, set_count) = create_signal(cx, 0);
+    let (count, set_count) = create_signal(cx, 0.0);
     let (open, set_open) = create_signal(cx, true);
     view! { cx,
         <div class="root">
-            <Button on:click=move |_| set_count.update(move |value| *value += 1)>"click"</Button>
+            <Button on:click=move |_| set_count.update(move |value| *value += 1.0)>"click"</Button>
             {move || count.get()}
             <Modal title=Some("".to_string()) open=open on_cancel=Some(Box::new(move || { set_open.set(false) }))>
                 "sd" {move || count.get()}
             </Modal>
+            <Progress percentage=count/>
         </div>
     }
 }

src/lib.rs

@@ -1,10 +1,12 @@
 mod button;
 mod card;
 mod modal;
+mod progress;
 mod table;
 mod teleport;
 mod utils;
 
 pub use button::*;
 pub use modal::*;
+pub use progress::*;
 pub use table::*;

src/progress/mod.rs

@@ -0,0 +1,46 @@
+use crate::utils::mount_style::mount_style;
+use leptos::*;
+use stylers::style_sheet_str;
+
+#[component]
+pub fn Progress(
+    cx: Scope,
+    #[prop(optional)] left_tip: Option<ReadSignal<String>>,
+    #[prop(optional)] right_tip: Option<ReadSignal<String>>,
+    percentage: ReadSignal<f64>,
+) -> impl IntoView {
+    let class_name = mount_style("progress", || style_sheet_str!("./src/progress/progress.css"));
+    let style = move || format!("width: {}%", percentage.get());
+    view! {
+        cx, class=class_name,
+        <div class="melt-progress">
+            <span class="melt-progress__tip-left">
+                {
+                    move || {
+                        if let Some(left_tip) = left_tip {
+                            left_tip.get()
+                        }  else {
+                            "".into()
+                        }
+                    }
+                }
+            </span>
+            <span class="melt-progress__progress">
+                <span class="melt-progress__progress-inner" style=style>
+                    <span class="melt-progress__progress-circle"></span>
+                </span>
+            </span>
+            <span class="melt-progress__tip-right">
+                {
+                    move || {
+                        if let Some(right_tip) = right_tip {
+                            right_tip.get()
+                        }  else {
+                            "".into()
+                        }
+                    }
+                }
+            </span>
+         </div>
+    }
+}

src/progress/progress.css

@@ -0,0 +1,47 @@
+.melt-progress {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
+    padding: 0 8px;
+}
+
+.melt-progress__tip-right,
+.melt-progress__tip-left {
+    display: inline-block;
+    margin: 0 10px;
+    width: 48px;
+    text-align: center;
+    font-size: 12px;
+    color: #777;
+}
+
+.melt-progress__progress {
+    flex: 1;
+    height: 3px;
+    background: #f2f2f2;
+    border-radius: 2px;
+    /* cursor: pointer; */
+}
+
+.melt-progress__progress-inner {
+    position: relative;
+    top: -14px;
+    display: inline-block;
+    background: red;
+    height: 100%;
+    transition: width 0.1s;
+}
+
+.melt-progress__progress-circle {
+    display: inline-block;
+    position: absolute;
+    right: -3px;
+    top: -4px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 0 3px 2px #4443;
+}