"css-mini-led"
Bootstrap 3.0.0 Snippet by efepimenta

<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="mini-led-gray"></div> </div> <div class="col-md-1"> <div class="mini-led-gray-blink"></div> </div> <div class="col-md-1"> <div class="mini-led-red"></div> </div> <div class="col-md-1"> <div class="mini-led-red-blink"></div> </div> <div class="col-md-1"> <div class="mini-led-orange"></div> </div> <div class="col-md-1"> <div class="mini-led-orange-blink"></div> </div> <div class="col-md-1"> <div class="mini-led-green"></div> </div> <div class="col-md-1"> <div class="mini-led-green-blink"></div> </div> <div class="col-md-1"> <div class="mini-led-yellow"></div> </div> <div class="col-md-1"> <div class="mini-led-yellow-blink"></div> </div> <div class="col-md-1"> <div class="mini-led-blue"></div> </div> <div class="col-md-1"> <div class="mini-led-blue-blink"></div> </div> </div> </div>
.mini-led-gray, .mini-led-gray-blink, .mini-led-red, .mini-led-red-blink, .mini-led-orange, .mini-led-orange-blink, .mini-led-green, .mini-led-green-blink, .mini-led-yellow, .mini-led-yellow-blink, .mini-led-blue, .mini-led-blue-blink { margin: 0 auto; margin-top: 5px; width: 18px; height: 18px; border-radius: 50%; } .mini-led-gray, .mini-led-gray-blink { background-color: #aab2bd; box-shadow: #aab2bd 0 -1px 6px 1px, inset #656d78 0 -1px 8px, #656d78 0 1px 6px; } .mini-led-red, .mini-led-red-blink { background-color: #F00; box-shadow: #7D7B80 0 -1px 6px 1px, inset #600 0 -1px 8px, #F00 0 3px 11px; } .mini-led-orange, .mini-led-orange-blink { background-color: #FF7000; box-shadow: #7D7B80 0 -1px 6px 1px, inset #630 0 -1px 8px, #FF7000 0 3px 11px; } .mini-led-green, .mini-led-green-blink { background-color: #80FF00; box-shadow: #7D7B80 0 -1px 6px 1px, inset #460 0 -1px 8px, #80FF00 0 3px 11px; } .mini-led-yellow, .mini-led-yellow-blink { background-color: #FF0; box-shadow: #7D7B80 0 -1px 6px 1px, inset #660 0 -1px 8px, #FF0 0 3px 11px; } .mini-led-blue, .mini-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; } } .mini-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; } .mini-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; } .mini-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; } .mini-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; } .mini-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; } .mini-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; } %mini-led { margin: 0 auto; margin-top: 5px; width: 18px; height: 18px; border-radius: 50%; } %mini-led-gray, .mini-led-gray { @extend %mini-led; background-color: #aab2bd; box-shadow: #aab2bd 0 -1px 6px 1px, inset #656d78 0 -1px 8px, #656d78 0 1px 6px; } %mini-led-red, .mini-led-red { @extend %mini-led; background-color: #F00; box-shadow: #7D7B80 0 -1px 6px 1px, inset #600 0 -1px 8px, #F00 0 3px 11px; } %mini-led-orange, .mini-led-orange { @extend %mini-led; background-color: #FF7000; box-shadow: #7D7B80 0 -1px 6px 1px, inset #630 0 -1px 8px, #FF7000 0 3px 11px; } %mini-led-green, .mini-led-green { @extend %mini-led; background-color: #80FF00; box-shadow: #7D7B80 0 -1px 6px 1px, inset #460 0 -1px 8px, #80FF00 0 3px 11px; } %mini-led-yellow, .mini-led-yellow { @extend %mini-led; background-color: #FF0; box-shadow: #7D7B80 0 -1px 6px 1px, inset #660 0 -1px 8px, #FF0 0 3px 11px; } %mini-led-blue, .mini-led-blue { @extend %mini-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); } .mini-led-gray-blink { @extend .mini-led-gray; @include blink_led(blinkGray); } .mini-led-red-blink { @extend .mini-led-red; @include blink_led(blinkRed); } .mini-led-yellow-blink { @extend .mini-led-yellow; @include blink_led(blinkYellow); } .mini-led-orange-blink { @extend .mini-led-orange; @include blink_led(blinkOrange); } .mini-led-blue-blink { @extend .mini-led-blue; @include blink_led(blinkBlue); } .mini-led-green-blink { @extend .mini-led-green; @include blink_led(blinkGreen); } */

Related: See More


Questions / Comments: