working(ish) upload

src/components/progress/component.rs

@@ -0,0 +1,23 @@
+use dioxus::prelude::*;
+use dioxus_primitives::progress::{self, ProgressIndicatorProps, ProgressProps};
+
+#[component]
+pub fn Progress(props: ProgressProps) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: asset!("./style.css") }
+        progress::Progress {
+            class: "progress",
+            value: props.value,
+            max: props.max,
+            attributes: props.attributes,
+            {props.children}
+        }
+    }
+}
+
+#[component]
+pub fn ProgressIndicator(props: ProgressIndicatorProps) -> Element {
+    rsx! {
+        progress::ProgressIndicator { class: "progress-indicator", attributes: props.attributes, {props.children} }
+    }
+}

src/components/progress/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

src/components/progress/style.css

@@ -0,0 +1,31 @@
+.progress {
+    position: relative;
+    overflow: hidden;
+    width: 200px;
+    height: .5rem;
+    box-sizing: border-box;
+    border-radius: 9999px;
+    background: var(--primary-color-5);
+}
+
+.progress[data-state='indeterminate'] .progress-indicator {
+    width: 50%;
+    animation: indeterminate 1s infinite linear;
+}
+
+.progress-indicator {
+    width: var(--progress-value, 0%);
+    height: 100%;
+    background-color: var(--secondary-color-1);
+    transition: width 250ms ease;
+}
+
+@keyframes indeterminate {
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(200%);
+    }
+}