impulse_thaw/progress_bar/
progress_bar.rs

1use leptos::prelude::*;
2use thaw_utils::{class_list, mount_style};
3
4#[component]
5pub fn ProgressBar(
6    #[prop(optional, into)] class: MaybeProp<String>,
7    /// A decimal number between 0 and 1 (or between 0 and max if given),
8    /// which specifies how much of the task has been completed.
9    #[prop(into, optional)]
10    value: Signal<f64>,
11    /// The maximum value, which indicates the task is complete.
12    /// The ProgressBar bar will be full when value equals max.
13    #[prop(default = 1.0.into(), optional)]
14    max: Signal<f64>,
15    /// ProgressBar color.
16    #[prop(into, optional)]
17    color: Signal<ProgressBarColor>,
18) -> impl IntoView {
19    mount_style("progress-bar", include_str!("./progress-bar.css"));
20
21    let style = move || {
22        let max = max.get();
23        let value = value.get().max(0.0).min(max);
24        format!("width: {:.02}%;", value / max * 100.0)
25    };
26
27    view! {
28        <div
29            class=class_list![
30                "thaw-progress-bar",
31                move || format!("thaw-progress-bar--{}", color.get().as_str()),
32                class
33            ]
34            role="progressbar"
35            aria_valuemax=move || max.get()
36            aria-valuemin="0"
37            aria-valuenow=move || value.get()
38        >
39            <div class="thaw-progress-bar__bar" style=style></div>
40        </div>
41    }
42}
43
44#[derive(Default, Clone)]
45pub enum ProgressBarColor {
46    #[default]
47    Brand,
48    Error,
49    Warning,
50    Success,
51}
52
53impl ProgressBarColor {
54    pub fn as_str(&self) -> &'static str {
55        match self {
56            Self::Brand => "brand",
57            Self::Error => "error",
58            Self::Warning => "warning",
59            Self::Success => "success",
60        }
61    }
62}
impulse_thaw/progress_bar/progress_bar.rs

impulse_thaw/progress_bar/
progress_bar.rs
