Beme style progress bar

23 Jun, 2016

How to create a progress bar that wraps around the screen of any sized device similar to the Beme app.

Beme is an app made by Casey Neistat to share exactly what your seeing without filters or editing. I notised that their new app has a subtle progress bar that wraps around the video to show how long is left. I wanted to see if I could create something similar for the web.

I'm going to first make one bar for each side of the screen.


<div class="load_wrapper">
	<div class="topload"></div>
	<div class="rightload"></div>
	<div class="bottomload"></div>
	<div class="leftload"></div>
</div>
		

*{margin:0;}
.load_wrapper{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
}
.topload{
	background:#1bc54b;
	height:7px;
	width:100%;
	position:absolute;
	top:0;
	transition:background .5s ease .1s;
}
.rightload{
	background:#1bc54b;
	height:100%;
	width:7px;
	position:absolute;
	right:0;
	transition:background .5s ease .1s;
}
.bottomload{
	background:#1bc54b;
	height:7px;
	width:100%;
	position:absolute;
	bottom:0;
	right:0;
}
.leftload{
	background:#1bc54b;
	height:100%;
	width:7px;
	position:absolute;
	left:0;
	bottom:0;
}

Using javascript ill get the width and height of the user's screen and add it up × 2 to get the outside length of the screen. Then ill get the percentage of individual bars from this value and change the bars width and height separately according to this. This will be in a function so that this doesn't have to be repeated.


function edgeBar(amm) {
	var width = $( document ).width();
	var height = $( document ).height();
	var full = (width*2) + (height*2);
	var barPercentLeft = (amm/100)*full;
	if(amm >= 100){
		$('.topload').css('background','#1bc54b');
		$('.topload').css('width','100%');
		$('.rightload').css('height','100%');
		$('.bottomload').css('width','100%');
		$('.leftload').css('height','100%');
	}else if(barPercentLeft < width){
		$('.topload').css('background','#f74848');
		$('.rightload').css('height','0%');
		$('.bottomload').css('width','0%');
		$('.leftload').css('height','0%');
		$('.topload').css('width',(barPercentLeft/width)*100+'%');
	}else if(barPercentLeft >= width && barPercentLeft < width+height){
		$('.topload').css('background','#1bc54b');
		$('.topload').css('width','100%');
		$('.bottomload').css('width','0%');
		$('.leftload').css('height','0%');
		$('.rightload').css('height',((barPercentLeft-width)/height)*100+'%');
	}else if(barPercentLeft >= width+height && barPercentLeft < width+width+height){
		$('.topload').css('background','#1bc54b');
		$('.topload').css('width','100%');
		$('.leftload').css('height','0%');
		$('.rightload').css('height','100%');
		$('.bottomload').css('width',((barPercentLeft-(width+height))/width)*100+'%');
	}else if(barPercentLeft >= width+width+height && barPercentLeft < width+width+height+height){
		$('.topload').css('background','#1bc54b');
		$('.topload').css('width','100%');
		$('.rightload').css('height','100%');
		$('.bottomload').css('width','100%');
		$('.leftload').css('height',((barPercentLeft-(width+width+height))/height)*100+'%');
	}
}

This function is by entering the persentage you want, inside.


edgeBar(63);

And to make it into a timer you could do...


var percent = 100;
var timer = setInterval(function(){
	if(percent <= 0){
		clearInterval(timer);
	}else{
		edgeBar(percent);
		percent = percent - 0.06
	}
}, 1);

See the Pen Beme style progress bar by karna (@kknmalone) on CodePen.

This is probibly not the best way to do this but it seams to work well.

Other Tutorials

View All

Building a custom chromecast web app

html - javascript

Chromecasts make streaming your favourite songs, games and movies easy. But if you're like me, you might be wondering what's going on behind the scenes when you cast an app, and how you can build your own.

Beginners guide to Regular Expressions

javascript - php - python

Regular Expressions (RegEx) are an extremely powerful tool that is common across most popular languages in use today. It can be used to find, replace and match text using a specialised instruction set.

Handy Python tricks for beginners

python

When first starting out in a language like Python, things tend to move a bit slow until you learn how to use the built-in functions and operators which exist to speed up the development process. So this tutorial will try to mitigate that problem.