<div class='bar'></div>
<div class='bar'></div>
<div class='bar'></div>

.bar {
	margin: 2em 0 0;
	width: 32em; max-width: 90%; height: 4em;
	box-shadow: 0 0 .125em #333;
	background: repeating-linear-gradient(135deg, 
  #000, #000 .25em, #0092b7 .25em, #0092b7 .75em) no-repeat;
	
	&:before {
		display: block;
		transform: translateY(-110%);
		background: #ff6d48;
		font: 700 1.25em/ 1.5 monospace;
		text-indent: .5em;
	}
	
	@for $i from 1 through 3 {
		&:nth-child(#{$i}) {
			$perc: $i*25%;
			
			background-size: $perc 100%;
			
			&:before { content: 'background-size: #{$perc} 100%;'; }
		}
	}
}