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.

Local Storage vs Cookies (The storage showdown)

javascript


Local site storage can open up a ton of possibilities in web design and breath new life into an otherwise static web page. Whether you want to do something simple like "show a welcome message only once", or something more complex.

Immersive Parallax scrolling effect

javascript - css - html


You might have noticed while moving along in a car or train, how far away objects seem to move across your vision slower than those closer to your eyes. This effect is known as parallax and its a fundamental aspect of vision which can often go unnoticed.

karnamalone@gmail.com