CodePen

HTML

            
              <!--div class="controls">
  <label for="track-control">Track</label>
  <input type="checkbox" id="track-control" checked-->
  <div class="equaliser-container">
    <ol class="equaliser-column">
      <li class="colour-bar"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
    </ol>
    <ol class="equaliser-column">
      <li class="colour-bar"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
    </ol>
    <ol class="equaliser-column">
      <li class="colour-bar"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
    </ol>
    <ol class="equaliser-column">
      <li class="colour-bar"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
    </ol>
    <ol class="equaliser-column">
      <li class="colour-bar"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
    </ol>
  </div>
<!--/div-->
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .clearfix {
	zoom: 1;
	&:before,
	&:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }
	&:after {
    clear: both;
  }
}
@background-color:#212121;
html,body {
 background:@background-color;
}
.equaliser-container {
  min-height:100%;
  max-width:160px;
  margin:0 auto;
  padding:80px 0 0 0;
  position:relative;
  .clearfix;
  box-reflect:below 0px -webkit-linear-gradient(top, rgba(0,0,0,0) 60%,rgba(0,0,0,0.1) 100%);
}
.colour-bar {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:18px;
  background:#AEED25;
}
.equaliser-column {
	width:20px;
  float:left;
  margin:0 6px;
  padding:0;
  height:180px;
  position:relative;
  list-style-type:none;
  background:#151515;
  &:nth-child(1) {
  	.colour-bar {
			animation: color-bar 2s 1s ease-out alternate infinite;
    }
  }
  &:nth-child(2) {
  	.colour-bar {
			animation: color-bar 2s 0.5s ease-out alternate infinite;
    }
  }
  &:nth-child(3) {
  	.colour-bar {
			animation: color-bar 2s 1.5s ease-out alternate infinite;
    }
  }
  &:nth-child(4) {
  	.colour-bar {
			animation: color-bar 2s 0.25s ease-out alternate infinite;
    }
  }
  &:nth-child(5) {
  	.colour-bar {
			animation: color-bar 2s 2s ease-out alternate infinite;
    }
  }
}
.led-mask {
	display:block;
  margin:0;
  position:relative;
  &:nth-child(even) {
  	background:@background-color;
    height:6px;
  }
  &:nth-child(odd) {
    height:12px;
  	background:transparent;
    box-shadow:0 0 1px rgba(0,0,0,1),
    inset 0 0 8px rgba(0,0,0,0.9);
  }
}
@keyframes color-bar {
  0% { height:18px; background:#AEED25; }
  10% { height:90px; background:#AEED25; }
  20% { height:54px; background:#AEED25; }
  30% { height:126px; background:#AEED25; }
  40% { height:162px; background:#AEED25; }
  50% { height:54px; background:#AEED25; }
  60% { height:144px; background:#AEED25; }
  70% { height:90px; background:#AEED25; }
  80% { height:126px; background:#AEED25; }
  90% { height:36px; background:#AEED25;   }
  100% { height:18px; background:#AEED25; }
}

/*input[type="checkbox"]#track-control {
	~ equaliser-container .colour-bar {
      animation:paused;
    }
  &:checked {
    ~ equaliser-container .colour-bar {
      animation:running;
    }
  }
}*/

/* background: -webkit-linear-gradient(top, #f70c0c 0%,#f70c0c 18px,#a2d822 18px,#a2d822 100%); */

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* Yep. Still no Javascript. */
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................