Progress Bar for Video? (Instagram Style)


#1

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:


#2

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


#3

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.


#4

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


#5

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>

#6

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?