<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%;'; }
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.