Page Widget How to - Create Signal Strength Chart

Question

We would like to know how to create Signal Strength Chart.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#signal-strength {<!--from w ww  .  ja  va2s  . c o m-->
  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;
}
</style>
</head>
<body>
  <ul id="signal-strength">
    <li class="very-weak"><div></div></li>
    <li class="weak"><div></div></li>
    <li class="strong"><div></div></li>
    <li class="pretty-strong"><div></div></li>
  </ul>
</body>
</html>

The code above is rendered as follows: