Cacher is the code snippet organizer for pro developers

.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>