diff --git a/app/javascript/vue/experiments/renderers/completed_tasks.vue b/app/javascript/vue/experiments/renderers/completed_tasks.vue
index 9ef8de555..d1a78fc22 100644
--- a/app/javascript/vue/experiments/renderers/completed_tasks.vue
+++ b/app/javascript/vue/experiments/renderers/completed_tasks.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative leading-5 h-full flex items-center">
-      <div>
+    <div>
       {{ i18n.t('experiments.card.completed_value', {
         completed: params.data.completed_tasks,
         all: params.data.total_tasks
@@ -8,7 +8,7 @@
       <div class="py-1">
         <div class="w-24 h-1 bg-sn-light-grey">
           <div class="h-full bg-sn-blue" :style="{
-            width: params.data.completed_tasks / params.data.total_tasks * 100 + '%'
+            width: `${progress}%`
           }"></div>
         </div>
       </div>
@@ -24,5 +24,14 @@ export default {
       required: true,
     },
   },
+  computed: {
+    progress() {
+      const { completed_tasks: completedTasks, total_tasks: totalTasks } = this.params.data;
+
+      if (totalTasks === 0) return 0;
+
+      return (completedTasks / totalTasks) * 100;
+    }
+  }
 };
 </script>