diff --git a/video.mjs b/video.mjs
index 82db36b..8c1df9b 100644
--- a/video.mjs
+++ b/video.mjs
@@ -2,22 +2,29 @@ import { createCanvas, loadImage } from 'canvas';
 import fs from 'fs';
 import { exec } from 'child_process';
 
-async function overlayImage(time_string) {
-    let ctx = createCanvas(853, 479).getContext('2d');
+async function overlayImage(time_string, index, total) {
+    let imageHeight = 479;
+    let imageWidth = 853;
+    let ctx = createCanvas(imageWidth, imageHeight).getContext('2d');
 
     let bg = await loadImage('bg.png')
     ctx.globalAlpha = 1;
-    ctx.drawImage(bg, 0, 0, 853, 479)
+    ctx.drawImage(bg, 0, 0, imageWidth, imageHeight)
 
     let overlay = await loadImage('images/raw/' + time_string + '.png')
     ctx.globalAlpha = 0.6;
-    ctx.drawImage(overlay, 0, 0, 853, 479)
+    ctx.drawImage(overlay, 0, 0, imageWidth, imageHeight)
 
     let text = time_string.substring(8, 10) + ':' + time_string.substring(10, 12);
     ctx.font = 'bold 70px sans-serif';
     ctx.fillStyle = 'rgba(0,0,0,0.7)';
     ctx.globalAlpha = 0.9;
-    ctx.fillText(text, 853 - 250, 479 - 40);
+    ctx.fillText(text, imageWidth - 250, imageHeight - 40);
+
+    ctx.fillStyle = 'rgba(56, 64, 219, 0.7)';
+    console.log(index, total);
+
+    ctx.fillRect(0, imageHeight - 20, imageWidth * (index / total) , 20);
 
     return ctx.canvas.toBuffer("image/png");
 }
@@ -32,7 +39,7 @@ async function generateFinalImages() {
     let i = 0;
     for (let file of files) {
         let time_string = file.split('.')[0];
-        let final_image = await overlayImage(time_string);
+        let final_image = await overlayImage(time_string, i, files.length - 1);
         fs.writeFileSync(`images/final/${i}.png`, final_image);
         i++;
     }