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

How to center things with CSS

html - css

Being able to center text, divs and images is one of the most important things that you can utilize to create clean and modern websites.

Essential meta tags for the modern internet

html

Meta tags give you the power to customise how your site appears to the rest of the internet. They provide a simple and fast way for web crawlers and other applications to get information about a website.

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.