A Pen by Captain Anonymous.

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by Anonasaurus Rex on CodePen.

License.

index.haml

.hall
    %h1 Your own server among many
    - (1..52).each do
        .server
            .fan
            .disk
            .indicator.red
            .indicator.yellow
            .indicator.green

script.js

$("h1").hide();

$('.server').each(function(i){
    var t = $(this);
    setTimeout(function(){ t.addClass('show'); }, (i+1) * 50);
  
  setTimeout(function(){
    t.addClass('hide');
    $(".server:eq(24)").removeClass('hide');
    $("h1").fadeIn();
  }, 3500);
});

style.sass

@import "compass"
body
  background: #222
  
.hall
  position: relative
  display: block
  &:after
    content: " "
    display: table
    clear: both  
    
h1
  position: absolute
  color: #FFF
  z-index: 1000
  font-family: "Calibri"
  font-size: 2em
  right: 50px
  top: 50%
  display: block
  -webkit-transform: translateY(-50%)
  
.server
  position: relative  
  border: 3px solid #222
  box-sizing: border-box
  height: 35px  
  width: 25%  
  background: #515B64
  float: left  
  border-radius: 6px
  opacity: 0
  -webkit-transform: scale(0.5)
  -webkit-transition: all .5s ease-out

.show
  opacity: 1
  -webkit-transform: scale(1)
    
.hide
  opacity: .4
    
.fan
  position: absolute  
  height: 60%
  width: 3px  
  background: #3C444B
  left: 5%
  top: 50%  
  -webkit-transform: translateY(-50%)
  box-shadow: 6px 0 0 #3C444B, 12px 0 0 #3C444B, 18px 0 0 #3C444B, 24px 0 0 #3C444B
  
.disk
  background: #3C444B
  position: absolute  
  left: 50%  
  height: 60%  
  width: 50%
  top: 50%  
  -webkit-transform: translate(-50%, -50%)

.indicator
  width: 6px  
  height: 6px  
  position: absolute
  top: 50%  
  -webkit-transform: translateY(-50%)
  border-radius: 100%

.red
  right: 30px
  background: #B4151B
  
.yellow
  right: 20px
  background: #E1AF27

.green 
  right: 10px    
  background: #4FBB2B