Mobile Carrier Signal Strength using CSS

HTML

<ul id="signal-strength">
    <li class="very-weak"><div></div></li>
    <li class="weak"><div></div></li>
    <li class="strong"><div></div></li>
</ul>

CSS

#signal-strength {
  height: 60px;
  list-style: none;
  overflow: hidden;
}
#signal-strength li {
  display: inline-block;
  width: 15px;
  float: left;
  height: 100%;
  margin-right: 1px;
}
#signal-strength li.pretty-strong {
  padding-top: 0px;
}
#signal-strength li.strong {
  padding-top: 15px;
}
#signal-strength li.weak {
  padding-top: 30px;
}
#signal-strength li.very-weak {
  padding-top: 45px;
}
#signal-strength li div {
  height: 100%;
  background: blue;
}