diff --git a/lib/blip_ds.dart b/lib/blip_ds.dart
index 759dc59e..dab4246c 100644
--- a/lib/blip_ds.dart
+++ b/lib/blip_ds.dart
@@ -158,4 +158,6 @@ export 'src/widgets/utils/ds_file_extension_icon.util.dart'
 export 'src/widgets/utils/ds_group_card.widget.dart' show DSGroupCard;
 export 'src/widgets/utils/ds_header.widget.dart' show DSHeader;
 export 'src/widgets/utils/ds_progress_bar.widget.dart' show DSProgressBar;
+export 'src/widgets/utils/ds_progressive_progress.widget.dart'
+    show DSProgressiveProgress;
 export 'src/widgets/utils/ds_user_avatar.widget.dart' show DSUserAvatar;
diff --git a/lib/src/widgets/chat/ds_image_message_bubble.widget.dart b/lib/src/widgets/chat/ds_image_message_bubble.widget.dart
index 92311f76..96245274 100644
--- a/lib/src/widgets/chat/ds_image_message_bubble.widget.dart
+++ b/lib/src/widgets/chat/ds_image_message_bubble.widget.dart
@@ -9,6 +9,7 @@ import '../../models/ds_message_bubble_style.model.dart';
 import '../../themes/colors/ds_colors.theme.dart';
 import '../texts/ds_caption_text.widget.dart';
 import '../utils/ds_expanded_image.widget.dart';
+import '../utils/ds_progressive_progress.widget.dart';
 import 'ds_document_select.widget.dart';
 import 'ds_message_bubble.widget.dart';
 import 'ds_show_more_text.widget.dart';
@@ -114,7 +115,11 @@ class _DSImageMessageBubbleState extends State<DSImageMessageBubble>
                         isLoading: false,
                         shouldAuthenticate: widget.shouldAuthenticate,
                       )
-                    : _buildDownloadProgress(),
+                    : DSProgressiveProgress(
+                        currentProgress: _controller.downloadProgress,
+                        maximumProgress: _controller.maximumProgress,
+                        foregroundColor: foregroundColor,
+                      ),
               ),
               if ((widget.title?.isNotEmpty ?? false) ||
                   (widget.text?.isNotEmpty ?? false))
@@ -161,27 +166,6 @@ class _DSImageMessageBubbleState extends State<DSImageMessageBubble>
     );
   }
 
-  Widget _buildDownloadProgress() {
-    final foregroundColor = widget.style.isLightBubbleBackground(widget.align)
-        ? DSColors.neutralDarkCity
-        : DSColors.neutralLightSnow;
-
-    final double percent = _controller.maximumProgress.value > 0
-        ? _controller.downloadProgress.value / _controller.maximumProgress.value
-        : 0;
-
-    return Center(
-      child: Padding(
-        padding: const EdgeInsets.all(8.0),
-        child: CircularProgressIndicator(
-          color: foregroundColor,
-          backgroundColor: Colors.grey,
-          value: percent,
-        ),
-      ),
-    );
-  }
-
   @override
   bool get wantKeepAlive => true;
 }
diff --git a/lib/src/widgets/chat/video/ds_video_message_bubble.widget.dart b/lib/src/widgets/chat/video/ds_video_message_bubble.widget.dart
index f5eee8fc..76b38c15 100644
--- a/lib/src/widgets/chat/video/ds_video_message_bubble.widget.dart
+++ b/lib/src/widgets/chat/video/ds_video_message_bubble.widget.dart
@@ -11,7 +11,7 @@ import '../../../services/ds_auth.service.dart';
 import '../../../themes/colors/ds_colors.theme.dart';
 import '../../../themes/icons/ds_icons.dart';
 import '../../buttons/ds_button.widget.dart';
-import '../../texts/ds_caption_small_text.widget.dart';
+import '../../utils/ds_progressive_progress.widget.dart';
 import '../ds_message_bubble.widget.dart';
 import '../ds_show_more_text.widget.dart';
 import 'ds_video_body.widget.dart';
@@ -131,7 +131,11 @@ class _DSVideoMessageBubbleState extends State<DSVideoMessageBubble>
                         color: DSColors.neutralDarkRooftop,
                       )
                     : _controller.isDownloading.value
-                        ? _buildDownloadProgress(foregroundColor)
+                        ? DSProgressiveProgress(
+                            currentProgress: _controller.downloadProgress,
+                            maximumProgress: _controller.maximumProgress,
+                            foregroundColor: foregroundColor,
+                          )
                         : _controller.thumbnail.isEmpty
                             ? Center(
                                 child: SizedBox(
@@ -186,32 +190,4 @@ class _DSVideoMessageBubbleState extends State<DSVideoMessageBubble>
       ),
     );
   }
-
-  Widget _buildDownloadProgress(final Color foregroundColor) {
-    final double percent = _controller.maximumProgress.value > 0
-        ? _controller.downloadProgress.value / _controller.maximumProgress.value
-        : 0;
-
-    return AnimatedOpacity(
-      opacity: _controller.maximumProgress.value > 0 ? 1 : 0,
-      duration: const Duration(milliseconds: 250),
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Padding(
-            padding: const EdgeInsets.all(8.0),
-            child: CircularProgressIndicator(
-              color: foregroundColor,
-              backgroundColor: Colors.grey,
-              value: percent,
-            ),
-          ),
-          DSCaptionSmallText(
-            _controller.getDownloadProgress(),
-            color: foregroundColor,
-          )
-        ],
-      ),
-    );
-  }
 }
diff --git a/lib/src/widgets/utils/ds_progressive_progress.widget.dart b/lib/src/widgets/utils/ds_progressive_progress.widget.dart
new file mode 100644
index 00000000..77ff175e
--- /dev/null
+++ b/lib/src/widgets/utils/ds_progressive_progress.widget.dart
@@ -0,0 +1,64 @@
+import 'package:file_sizes/file_sizes.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+import '../../themes/colors/ds_colors.theme.dart';
+import '../texts/ds_caption_small_text.widget.dart';
+
+class DSProgressiveProgress extends StatelessWidget {
+  final RxInt maximumProgress;
+  final RxInt currentProgress;
+  final Color? foregroundColor;
+
+  const DSProgressiveProgress({
+    super.key,
+    required this.maximumProgress,
+    required this.currentProgress,
+    this.foregroundColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(
+      () {
+        final double percent = maximumProgress.value > 0
+            ? currentProgress.value / maximumProgress.value
+            : 0;
+
+        return SizedBox(
+          width: double.infinity,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            mainAxisSize: MainAxisSize.max,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: CircularProgressIndicator(
+                  color: DSColors.primary,
+                  backgroundColor: Colors.grey,
+                  value: currentProgress.value < maximumProgress.value
+                      ? percent
+                      : null,
+                ),
+              ),
+              DSCaptionSmallText(
+                _buildProgress(),
+                color: foregroundColor ?? DSColors.neutralDarkCity,
+              )
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  String _buildProgress() {
+    String getSize(int value) => FileSize.getSize(
+          value,
+          precision: PrecisionValue.One,
+        );
+
+    return '${getSize(currentProgress.value)} / ${getSize(maximumProgress.value)}';
+  }
+}