removes percentage text; uses png without background;

src/renderer/src/pages/splash/splash.css.ts

@@ -27,22 +27,14 @@ export const updateInfoSection = style({
   justifyContent: "center",
 });
 
-export const progressBarContainer = style({
-  width: "100%",
-  borderRadius: "24px",
-  display: "flex",
-  alignItems: "center",
-  position: "relative",
-  justifyContent: "center",
-  border: `solid 1px ${vars.color.border}`,
-  overflow: "hidden",
-});
-
 export const progressBar = style({
   WebkitAppearance: "none",
   appearance: "none",
-  position: "absolute",
+  borderRadius: "4px",
   width: "100%",
+  border: `solid 1px ${vars.color.border}`,
+  overflow: "hidden",
+  height: "18px",
   "::-webkit-progress-value": {
     backgroundColor: vars.color.background,
     transition: "width 0.2s",

src/renderer/src/pages/splash/splash.tsx

@@ -53,16 +53,11 @@ export default function Splash() {
         return (
           <>
             <p>{t("downloading_version", { version: newVersion })}</p>
-            <div className={styles.progressBarContainer}>
+            <progress
-              <progress
+              className={styles.progressBar}
-                className={styles.progressBar}
+              max="100"
-                max="100"
+              value={status.info.percent}
-                value={status.info.percent}
+            />
-              />
-              <span className={styles.progressBarText}>
-                {status.info.percent.toFixed(2)} %
-              </span>
-            </div>
           </>
         );
       case "checking-for-updates":