<div class="wrapper">
	
	<div class="master">
			<div class="progressBar">
				<div class="title">
					In Transit
				</div>
				
				<div class="graph">
					<span id="bar" class="b20porcent"></span>
				</div>
			</div>
		
		<div class="subtitle">
			Driver Assigned
		</div>
		
	</div>
	
</div>

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

$blue = #4887d9
$lightblue = alpha( $blue , 50%)

body
	font-size 14px
	
.wrapper
	background #cacaca
	width 100%
	display flex
	justify-content center
	height 100Vh
	align-items center
	
	.master	
		transform scale(1)
		max-width 350px
	
		.progressBar
			border-radius 3px
			padding 0 3px
			line-height 40px
			position relative
			z-index 2
			margin-left 5px
			width 200px
			
		.title
			font-family 'oswald'
			text-transform uppercase
			font-size 1.25rem
			display inline
			color white
			background alpha(blue, 0.2)
			position relative
			z-index 999
			padding 0 5px
			mix-blend-mode lighten

		.graph
			display flex
			width 100%
			height 33px
			position absolute
			top 2px
			z-index 0
			border 1px solid gray
			border-radius 6px
			overflow hidden
			left: -9px
			
			span 
				background $blue
				height 100%
				display block
				z-index -1	
				transition width cubic-bezier(.74,0,.32,.99) 0.3s
				
				&.b20porcent
					width 20%
					transition width cubic-bezier(.74,0,.32,.99) 0.3s
					
				&.b90porcent
					width 90%
					transition width cubic-bezier(.74,0,.32,.99) 0.3s
					
				&.b100porcent
					width 100%
				
		.subtitle
			color gray
			font-family roboto
			text-transform uppercase

// SIMULATION OF DIFERENT BAR PROGRESS
// NOT MEANT TO USE JQUERY 

function add20(){
	$(".graph > span ").removeClass('b90porcent');
	$(".graph > span ").addClass("b20porcent");
}

function add90(){
	$(".graph > span ").removeClass("b20porcent");
		$(".graph > span ").addClass("b90porcent");
}

$( document ).ready(function() {
		
	setInterval(
		function(){ 
			add20();
			setTimeout( add90, 1000);
		},
		2000);
	
})