Pure CSS Signal Indicator
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>