<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Css leds</h2>
<h4>inspired from https://codepen.io/fskirschbaum/pen/MYJNaj</h4>
</div>
<div class="row">
<div class="col-md-1">
<div class="led-gray"></div>
</div>
<div class="col-md-1">
<div class="led-gray-blink"></div>
</div>
<div class="col-md-1">
<div class="led-red"></div>
</div>
<div class="col-md-1">
<div class="led-red-blink"></div>
</div>
<div class="col-md-1">
<div class="led-orange"></div>
</div>
<div class="col-md-1">
<div class="led-orange-blink"></div>
</div>
<div class="col-md-1">
<div class="led-green"></div>
</div>
<div class="col-md-1">
<div class="led-green-blink"></div>
</div>
<div class="col-md-1">
<div class="led-yellow"></div>
</div>
<div class="col-md-1">
<div class="led-yellow-blink"></div>
</div>
<div class="col-md-1">
<div class="led-blue"></div>
</div>
<div class="col-md-1">
<div class="led-blue-blink"></div>
</div>
</div>
</div>
.led-gray,
.led-gray-blink,
.led-red,
.led-red-blink,
.led-orange,
.led-orange-blink,
.led-green,
.led-green-blink,
.led-yellow,
.led-yellow-blink,
.led-blue,
.led-blue-blink {
margin: 0 auto;
width: 24px;
height: 24px;
border-radius: 50%;
}
.led-gray,
.led-gray-blink {
background-color: #aab2bd;
box-shadow: #aab2bd 0 -1px 6px 1px, inset #656d78 0 -1px 8px, #656d78 0 1px 6px;
}
.led-red,
.led-red-blink {
background-color: #F00;
box-shadow: #7D7B80 0 -1px 6px 1px, inset #600 0 -1px 8px, #F00 0 3px 11px;
}
.led-orange,
.led-orange-blink {
background-color: #FF7000;
box-shadow: #7D7B80 0 -1px 6px 1px, inset #630 0 -1px 8px, #FF7000 0 3px 11px;
}
.led-green,
.led-green-blink {
background-color: #80FF00;
box-shadow: #7D7B80 0 -1px 6px 1px, inset #460 0 -1px 8px, #80FF00 0 3px 11px;
}
.led-yellow,
.led-yellow-blink {
background-color: #FF0;
box-shadow: #7D7B80 0 -1px 6px 1px, inset #660 0 -1px 8px, #FF0 0 3px 11px;
}
.led-blue,
.led-blue-blink {
background-color: #06F;
box-shadow: #7D7B80 0 -1px 6px 1px, inset #006 0 -1px 8px, #06F 0 3px 11px;
}
@-moz-keyframes blinkGray {
0% {
background-color: #aab2bd;
}
50% {
background-color: #CBD5E2;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #aab2bd 0 1px 0;
}
100% {
background-color: #aab2bd;
}
}
@-webkit-keyframes blinkGray {
0% {
background-color: #aab2bd;
}
50% {
background-color: #CBD5E2;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #aab2bd 0 1px 0;
}
100% {
background-color: #aab2bd;
}
}
@keyframes blinkGray {
0% {
background-color: #aab2bd;
}
50% {
background-color: #CBD5E2;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #aab2bd 0 1px 0;
}
100% {
background-color: #aab2bd;
}
}
@-moz-keyframes blinkRed {
0% {
background-color: #db212b;
}
50% {
background-color: #db212b;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #db212b 0 1px 0;
}
100% {
background-color: #db212b;
}
}
@-webkit-keyframes blinkRed {
0% {
background-color: #db212b;
}
50% {
background-color: #db212b;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #db212b 0 1px 0;
}
100% {
background-color: #db212b;
}
}
@keyframes blinkRed {
0% {
background-color: #db212b;
}
50% {
background-color: #db212b;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #db212b 0 1px 0;
}
100% {
background-color: #db212b;
}
}
@-moz-keyframes blinkYellow {
0% {
background-color: #FF0;
}
50% {
background-color: #AA0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #FF0 0 1px 0;
}
100% {
background-color: #FF0;
}
}
@-webkit-keyframes blinkYellow {
0% {
background-color: #FF0;
}
50% {
background-color: #AA0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #FF0 0 1px 0;
}
100% {
background-color: #FF0;
}
}
@keyframes blinkYellow {
0% {
background-color: #FF0;
}
50% {
background-color: #AA0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #FF0 0 1px 0;
}
100% {
background-color: #FF0;
}
}
@-moz-keyframes blinkOrange {
0% {
background-color: #FF7000;
}
50% {
background-color: #FFB061;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #FF7000 0 1px 0;
}
100% {
background-color: #FF7000;
}
}
@-webkit-keyframes blinkOrange {
0% {
background-color: #FF7000;
}
50% {
background-color: #FFB061;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #FF7000 0 1px 0;
}
100% {
background-color: #FF7000;
}
}
@keyframes blinkOrange {
0% {
background-color: #FF7000;
}
50% {
background-color: #FFB061;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #FF7000 0 1px 0;
}
100% {
background-color: #FF7000;
}
}
@-moz-keyframes blinkBlue {
0% {
background-color: #5d9cec;
}
50% {
background-color: #2b7bff;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #5d9cec 0 1px 0;
}
100% {
background-color: #5d9cec;
}
}
@-webkit-keyframes blinkBlue {
0% {
background-color: #5d9cec;
}
50% {
background-color: #2b7bff;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #5d9cec 0 1px 0;
}
100% {
background-color: #5d9cec;
}
}
@keyframes blinkBlue {
0% {
background-color: #5d9cec;
}
50% {
background-color: #2b7bff;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #5d9cec 0 1px 0;
}
100% {
background-color: #5d9cec;
}
}
@-moz-keyframes blinkGreen {
0% {
background-color: #80FF00;
}
50% {
background-color: #6cff82;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #80FF00 0 1px 0;
}
100% {
background-color: #80FF00;
}
}
@-webkit-keyframes blinkGreen {
0% {
background-color: #80FF00;
}
50% {
background-color: #6cff82;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #80FF00 0 1px 0;
}
100% {
background-color: #80FF00;
}
}
@keyframes blinkGreen {
0% {
background-color: #80FF00;
}
50% {
background-color: #6cff82;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #80FF00 0 1px 0;
}
100% {
background-color: #80FF00;
}
}
.led-gray-blink {
-webkit-animation: blinkGray 0.7s infinite;
-moz-animation: blinkGray 0.7s infinite;
-ms-animation: blinkGray 0.7s infinite;
-o-animation: blinkGray 0.7s infinite;
animation: blinkGray 0.7s infinite;
}
.led-red-blink {
-webkit-animation: blinkRed 0.7s infinite;
-moz-animation: blinkRed 0.7s infinite;
-ms-animation: blinkRed 0.7s infinite;
-o-animation: blinkRed 0.7s infinite;
animation: blinkRed 0.7s infinite;
}
.led-yellow-blink {
-webkit-animation: blinkYellow 0.7s infinite;
-moz-animation: blinkYellow 0.7s infinite;
-ms-animation: blinkYellow 0.7s infinite;
-o-animation: blinkYellow 0.7s infinite;
animation: blinkYellow 0.7s infinite;
}
.led-orange-blink {
-webkit-animation: blinkOrange 0.7s infinite;
-moz-animation: blinkOrange 0.7s infinite;
-ms-animation: blinkOrange 0.7s infinite;
-o-animation: blinkOrange 0.7s infinite;
animation: blinkOrange 0.7s infinite;
}
.led-blue-blink {
-webkit-animation: blinkBlue 0.7s infinite;
-moz-animation: blinkBlue 0.7s infinite;
-ms-animation: blinkBlue 0.7s infinite;
-o-animation: blinkBlue 0.7s infinite;
animation: blinkBlue 0.7s infinite;
}
.led-green-blink {
-webkit-animation: blinkGreen 0.7s infinite;
-moz-animation: blinkGreen 0.7s infinite;
-ms-animation: blinkGreen 0.7s infinite;
-o-animation: blinkGreen 0.7s infinite;
animation: blinkGreen 0.7s infinite;
}
/*
sass styles
@import "compass/css3";
@mixin blink($cl1,$cl2) {
0% {
background-color: $cl2;
}
50% {
background-color: $cl1;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, $cl2 0 1px 0;
}
100% {
background-color: $cl2;
}
}
@mixin blink_led($name) {
$time: 0.7s;
-webkit-animation: $name $time infinite;
-moz-animation: $name $time infinite;
-ms-animation: $name $time infinite;
-o-animation: $name $time infinite;
animation: $name $time infinite;
}
%led {
margin: 0 auto;
width: 24px;
height: 24px;
border-radius: 50%;
}
%led-gray,
.led-gray {
@extend %led;
background-color: #aab2bd;
box-shadow: #aab2bd 0 -1px 6px 1px, inset #656d78 0 -1px 8px, #656d78 0 1px 6px;
}
%led-red,
.led-red {
@extend %led;
background-color: #F00;
box-shadow: #7D7B80 0 -1px 6px 1px, inset #600 0 -1px 8px, #F00 0 3px 11px;
}
%led-orange,
.led-orange {
@extend %led;
background-color: #FF7000;
box-shadow: #7D7B80 0 -1px 6px 1px, inset #630 0 -1px 8px, #FF7000 0 3px 11px;
}
%led-green,
.led-green {
@extend %led;
background-color: #80FF00;
box-shadow: #7D7B80 0 -1px 6px 1px, inset #460 0 -1px 8px, #80FF00 0 3px 11px;
}
%led-yellow,
.led-yellow {
@extend %led;
background-color: #FF0;
box-shadow: #7D7B80 0 -1px 6px 1px, inset #660 0 -1px 8px, #FF0 0 3px 11px;
}
%led-blue,
.led-blue {
@extend %led;
background-color: #06F;
box-shadow: #7D7B80 0 -1px 6px 1px, inset #006 0 -1px 8px, #06F 0 3px 11px;
}
@include keyframes('blinkGray') {
@include blink(#CBD5E2, #aab2bd);
}
@include keyframes('blinkRed') {
@include blink(#db212b, #db212b);
}
@include keyframes('blinkYellow') {
@include blink(#AA0, #FF0);
}
@include keyframes('blinkOrange') {
@include blink(#FFB061, #FF7000);
}
@include keyframes('blinkBlue') {
@include blink(#2b7bff, #5d9cec);
}
@include keyframes('blinkGreen') {
@include blink(#6cff82, #80FF00);
}
.led-gray-blink {
@extend .led-gray;
@include blink_led(blinkGray);
}
.led-red-blink {
@extend .led-red;
@include blink_led(blinkRed);
}
.led-yellow-blink {
@extend .led-yellow;
@include blink_led(blinkYellow);
}
.led-orange-blink {
@extend .led-orange;
@include blink_led(blinkOrange);
}
.led-blue-blink {
@extend .led-blue;
@include blink_led(blinkBlue);
}
.led-green-blink {
@extend .led-green;
@include blink_led(blinkGreen);
}
*/
