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.

1 Like

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.

1 Like

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">
<head>
<meta charset="utf-8">
<title>Progress</title>
<style>
    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);
}
</style>
</head>
<body>
<div id='progress' data-control='10:30'>
	<div id='progress_bar' class='webvfx'  data-animate='{
		  0% : {width:   0%;} ,
		100% : {width: 100%;}
	}'></div>	
</div>
</body>
<script src="WebVfx.js"></script>
</html>
3 Likes

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?

I recently encountered a problem about how to add a progress bar for video and your answers help me a lot, guys Thank for sharing this information!
Jack_Bilson, I can also advise you to use Intagrowing for followers attracting, I used this service several times and I liked the result.

Since the bulk of the replies were posted before the introduction of keyframes, there is now an easier solution available:

  1. Add a video track, which is on top of every other track.
  2. Either insert an image or a colour (Open other > Colour) into the track.
  3. Use the “Size and Position” filter with “Distort” checked to achieve the right shape.
  4. Set the playhead on the desired end time and press on the clock/timer button to enable advanced keyframes. A keyframe will be generated at this position (Visible in the keyframes panel - View > Keyframes).
  5. Set the playhead at the start time and type in a smaller value for the height/width. If you now click on play, an animated bar will be visible.
2 Likes

Thanks pal for this,useful tip for me. I want to make the best Instagram profile. I am a beginner, but I am trying to do my best. Last year I spend doing photos from all over the world and now I am posting them on my Instagram, videos as well. Probably I am cheating a little using https://igautolike.com but this is just for some likes and not more. I will post even more because I am going on a travel soon and this is pretending to be really cool, so my followers stay tuned for updates