From d20d3d0b77218c2edcfa2b60a97b8d675e5e0e31 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Tue, 21 May 2024 13:11:48 -0300
Subject: [PATCH] refactor to use html5 progress tag

---
 src/renderer/src/pages/splash/splash.css.ts | 17 +++++++++++------
 src/renderer/src/pages/splash/splash.tsx    |  9 +++++----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/renderer/src/pages/splash/splash.css.ts b/src/renderer/src/pages/splash/splash.css.ts
index 8a78397c..1d807159 100644
--- a/src/renderer/src/pages/splash/splash.css.ts
+++ b/src/renderer/src/pages/splash/splash.css.ts
@@ -34,17 +34,22 @@ export const progressBarContainer = style({
   alignItems: "center",
   position: "relative",
   justifyContent: "center",
-  backgroundColor: vars.color.darkBackground,
   border: `solid 1px ${vars.color.border}`,
   overflow: "hidden",
 });
 
-export const progressBarFill = style({
+export const progressBar = style({
+  WebkitAppearance: "none",
+  appearance: "none",
   position: "absolute",
-  transition: "width 0.1s",
-  height: "100%",
-  left: 0,
-  background: vars.color.background,
+  width: "100%",
+  "::-webkit-progress-value": {
+    backgroundColor: vars.color.background,
+    transition: "width 0.2s",
+  },
+  "::-webkit-progress-bar": {
+    backgroundColor: vars.color.darkBackground,
+  },
 });
 
 export const progressBarText = style({
diff --git a/src/renderer/src/pages/splash/splash.tsx b/src/renderer/src/pages/splash/splash.tsx
index 76801d70..27fbd38d 100644
--- a/src/renderer/src/pages/splash/splash.tsx
+++ b/src/renderer/src/pages/splash/splash.tsx
@@ -54,10 +54,11 @@ export default function Splash() {
           <>
             <p>{t("downloading_version", { version: newVersion })}</p>
             <div className={styles.progressBarContainer}>
-              <div
-                className={styles.progressBarFill}
-                style={{ width: `${status.info.percent}%` }}
-              ></div>
+              <progress
+                className={styles.progressBar}
+                max="100"
+                value={status.info.percent}
+              />
               <span className={styles.progressBarText}>
                 {status.info.percent.toFixed(2)} %
               </span>