Pure CSS Signal Indicator

7 September, 2020

Learn how to make a signal indicator icon with 4 different strength levels using only HTML & CSS. Absolutely no images or graphics required.

Simple HTML and CSS is all you need for a basic signal indicator icon. CSS flexbox makes it easy to space the bars evenly apart from each other and sink them to the bottom. After that, some weak, medium and strong classes and creative use of the :nth-child() selector lets us tweak the size and emphasis of the signal bars. Take a look!

To use these icons, just place these styles somewhere on the page or in an appropriate place in your project:

.signal-icon {
  height: 18px;
  width: 18px;
  /* To show you the power of flexbox! */
  display: flex;
  /* Bars should be placed left to right */
  flex-direction: row;
  /* Evenly space the bars with space in between */
  justify-content: space-between;
  /* Sink the bars to the bottom, so they go up in steps */
  align-items: baseline;
}
.signal-icon .signal-bar {
  /* 4 + 3 + 4 + 3 + 4 = 18px (as set above)
     4px per bar and 3px margins between */
  width: 4px;
  /* All bars faded by default */
  opacity: 30%;
  /* Choose a color */
  background: #aa2200;
}

/* 3 different heights for 3 different bars */
.signal-icon .signal-bar:nth-child(1) { height: 40%; }
.signal-icon .signal-bar:nth-child(2) { height: 70%; }
.signal-icon .signal-bar:nth-child(3) { height: 100%; }

/* Emphasize different bars depending on
   weak/medium/strong classes */
.signal-icon.weak .signal-bar:nth-child(1),
.signal-icon.medium .signal-bar:nth-child(1),
.signal-icon.medium .signal-bar:nth-child(2),
.signal-icon.strong .signal-bar:nth-child(1),
.signal-icon.strong .signal-bar:nth-child(2),
.signal-icon.strong .signal-bar:nth-child(3)
{ opacity: 100%; }

Then use the HTML below to display the icons on your page or app. Use the weak, medium and strong classes next to the signal-icon class to turn on 1, 2 or 3 bars respectively. Without the modifier classes all 3 bars will be faded, indicating no signal.

<!-- zero signal, no bars -->
<div class="signal-icon">
  <div class="signal-bar"></div>
  <div class="signal-bar"></div>
  <div class="signal-bar"></div>
</div>

<!-- weak signal, 1 bar -->
<div class="signal-icon weak">
  <div class="signal-bar"></div>
  <div class="signal-bar"></div>
  <div class="signal-bar"></div>
</div>

<!-- medium signal, 2 bars -->
<div class="signal-icon medium">
  <div class="signal-bar"></div>
  <div class="signal-bar"></div>
  <div class="signal-bar"></div>
</div>

<!-- strong signal, 3 bars -->
<div class="signal-icon strong">
  <div class="signal-bar"></div>
  <div class="signal-bar"></div>
  <div class="signal-bar"></div>
</div>