Progress Bar for Video? (Instagram Style)


Hello everyone,

I’m new to Shotcut and video editing in general, but I’m really enjoying learning and I’m very grateful for this amazing tool and community all being totally free!

I was wondering if anyone knows how I could add a “progress bar” on the bottom of a video. This can be seen often in Instagram videos such as this one:

It’s just useful for keeping the audience engaged as they know how much longer the video lasts. I had an idea of making a solid color bar and placing it at the bottom of the video, then adding a filter to make the image gradually appear from left to right over the duration of the video, but I couldn’t work out if this was possible.

Hopefully we can solve this and help some people with the same issue as me :smiley:


These progress bars are a function of the ‘player’ - not part of a video.


Hi Stefanou97

As Steve_Ledger wrote above this kind of functionality is handled by the player normally.

Now, if you really want to do something like this in a standalone video, I guess you could do it using the Overlay HTML filter.

Check this post

the framework mentioned there can be used to create a progress bar.


Brilliant! Thanks for the speedy response, I appreciate it :smiley:


Go to my website that is specified on the thread HTML Filters: Titles, Scrolling Credits, Stopwatches, Gauges etc and download the WebVfx javascript framework.

The following HTML overlay filter (with the webvfx tickbox ticked) will give a nice multicoloured progress bar such you see on IOS. You can play with the height of the #progress DIV to tailor it to your requirements.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
    html, body	{margin:0; padding:0; width: 100%; height: 100%; overflow: hidden;}
#progress {
	background-color:  #dee;
	position:		   absolute;
	width:			   100%;
	height:			     2%;
	bottom                0;
#progress_bar {
	height: 100%;
	background-image: linear-gradient(to right, #5d6, #6cf, #07f, #3ad, #55d, #f35);
<div id='progress' data-control='10:30'>
	<div id='progress_bar' class='webvfx'  data-animate='{
		  0% : {width:   0%;} ,
		100% : {width: 100%;}
<script src="WebVfx.js"></script>


AIt is difficult for me to understand and uncomfortable, but I think you can get used to it.
Concerninge of attracting an audience, I used several services, I remember one (instafollowfast).
I could not add a progress bar, how to do it?