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

CSS Material design toggle switch

html - css - javascript

Because sometimes all you want is just a good looking switch without importing an entire library to do it.

Triggering vibrations from your website

javascript

Most common mobile browsers (excluding safari) allow you to trigger the device's vibration motor from your web application using the Vibration API. The Vibration API is provided to you by the mobile browser itself.

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.