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() { <>

{t("downloading_version", { version: newVersion })}

-
+ {status.info.percent.toFixed(2)} %