diff --git a/packages/docusaurus-bundler/src/currentBundler.ts b/packages/docusaurus-bundler/src/currentBundler.ts
index ee804e71759b..8ce5dee378f6 100644
--- a/packages/docusaurus-bundler/src/currentBundler.ts
+++ b/packages/docusaurus-bundler/src/currentBundler.ts
@@ -87,17 +87,19 @@ export async function getProgressBarPlugin({
   currentBundler: CurrentBundler;
 }): Promise<typeof WebpackBar> {
   if (currentBundler.name === 'rspack') {
-    class CustomRspackProgressPlugin extends currentBundler.instance
-      .ProgressPlugin {
-      constructor({name}: {name: string}) {
-        // TODO add support for color
-        // Unfortunately the rspack.ProgressPlugin does not have a name option
+    const rspack = getCurrentBundlerAsRspack({currentBundler});
+    class CustomRspackProgressPlugin extends rspack.ProgressPlugin {
+      constructor({name, color = 'green'}: {name?: string; color?: string}) {
+        // Unfortunately rspack.ProgressPlugin does not have name/color options
         // See https://rspack.dev/plugins/webpack/progress-plugin
-        // @ts-expect-error: adapt Rspack ProgressPlugin constructor
-        super({prefix: name});
+        super({
+          prefix: name,
+          template: `● {prefix:.bold} {bar:50.${color}/white.dim} ({percent}%) {wide_msg:.dim}`,
+          progressChars: '■■',
+        });
       }
     }
-    return CustomRspackProgressPlugin as typeof WebpackBar;
+    return CustomRspackProgressPlugin as unknown as typeof WebpackBar;
   }
 
   return WebpackBar;
diff --git a/packages/docusaurus/src/webpack/client.ts b/packages/docusaurus/src/webpack/client.ts
index 59d982a13121..c5ec4dbdd9f1 100644
--- a/packages/docusaurus/src/webpack/client.ts
+++ b/packages/docusaurus/src/webpack/client.ts
@@ -65,6 +65,7 @@ async function createBaseClientConfig({
       new ChunkAssetPlugin(),
       new ProgressBarPlugin({
         name: 'Client',
+        color: 'green',
       }),
       await createStaticDirectoriesCopyPlugin({
         props,