feat: enhance progress bar UI in PluginManagementPage

- Replaced the native progress element with a custom-styled progress bar for improved visual feedback during downloads.
- Added new styles for progress bar and fill animations to enhance user experience.
- Updated the component to use ARIA roles for better accessibility.
This commit is contained in:
leookun
2026-08-30 20:58:42 +08:00
parent 453c120740
commit 43a18377b6
2 changed files with 43 additions and 10 deletions
@@ -143,6 +143,37 @@
margin-top: 6px;
}
.progressBar {
width: 100%;
height: 8px;
overflow: hidden;
background: color-mix(in srgb, var(--vscode-foreground) 10%, transparent);
border-radius: 999px;
}
// 反向斜纹(-45°)+ 无限反向滚动;未知总量时以 100% 宽度作不确定态。
.progressFill {
height: 100%;
background-color: var(--vscode-progressBar-background, #0e70c0);
background-image: linear-gradient(
-45deg,
rgb(255 255 255 / 24%) 25%,
transparent 25% 50%,
rgb(255 255 255 / 24%) 50% 75%,
transparent 75%
);
background-size: 24px 24px;
border-radius: 999px;
transition: width 160ms ease;
animation: progress-stripes 0.7s linear infinite;
}
@keyframes progress-stripes {
to {
background-position: -24px 0;
}
}
.progressContent {
display: flex;
flex-direction: column;
@@ -152,12 +183,6 @@
font-size: type.$font-size-base;
}
progress {
width: 100%;
height: 8px;
accent-color: var(--vscode-progressBar-background);
}
span {
color: var(--vscode-descriptionForeground);
font-size: type.$font-size-xs;
@@ -277,11 +277,19 @@ function RuntimeProgressModal({ open, status, starting, onClose }: { open: boole
<div className={styles.progressContent} aria-live="polite">
<strong>{stage}</strong>
{status?.phase === "downloading" && <>
<progress
<div
className={styles.progressBar}
role="progressbar"
aria-label={t("下载进度")}
value={percent ?? undefined}
max={100}
/>
aria-valuemin={0}
aria-valuemax={100}
aria-valuenow={percent ?? undefined}
>
<div
className={styles.progressFill}
style={{ width: `${percent ?? 100}%` }}
/>
</div>
<span>
{total ? t("已下载 {downloaded} / {total}", { downloaded: formatBytes(downloaded), total: formatBytes(total) }) : t("已下载 {downloaded}", { downloaded: formatBytes(downloaded) })}
</span>