I needed some sort of activity indicator for a web application I am building, so I hacked together some LEDs in CSS. Thus, led.css was born.

Just a few lines of HTML will get you up and running. If you are familiar with the btn class in Bootstrap, this works similarly.

The default LED can be created like this:

<div class="led"></div>

The default LED is in an “off” state, so add some color:

<div class="led led-red"></div>
<div class="led led-orange"></div>
<div class="led led-yellow"></div>
<div class="led led-green"></div>
<div class="led led-blue"></div>

And you get something like this.

Throw in some Javascript and you yourself some pretty blinking LEDs in CSS:

$('.led').click(function() {
  $('this').toggleClass('led-green');
});

I have implemented these LEDs to show network activity and status when using the wonderful Socket.IO library. Helpful when network connections are sketchy.