Señal de radio
.signalWrapper{
width:26px;
height:auto;
background-color:#fff;
}
.signalWrapper .bar{
background-color:#eee;
width:5px;
display:inline-block;
vertical-align:bottom;
margin-left:2px;
}
.signalWrapper .bar:first-child{
margin-left:0%;
}
.signalWrapper .first{height:8px;}
.signalWrapper .second{height:12px;}
.signalWrapper .third{height:16px;}
.signalWrapper .fourth{height:21px;}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
function radioSignal(/*string*/id, /*number 0..4*/pot, /* string RGB color*/sColor){
var $bars = $("#"+id + " .bar");
for (var i = 0; i < pot; i++) {
$bars[i].style.backgroundColor = sColor;
}
}
//llamamos, por ejemplo para imprimir una potencia de 3
radioSignal("radioSignal", 6, "#0063be");
<div id="radioSignal" class="signalWrapper">
<div class="bar first"></div><!--
--><div class="bar second"></div><!--
--><div class="bar third"></div><!--
--><div class="bar fourth"></div>
</div>
Se simula la visualización de una señal de radio
A Pen by Aitor Alejandro on CodePen.