Cacher is the code snippet organizer for pro developers

$(document).ready(function() {

  var booting = $("#booting");
  var width = 10;
  var id = setInterval(frame, 60);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      booting.css('width', width + '%');
    }
  }

  setTimeout(function() {
    $(".booting-loader").animate({
      opacity: "toggle"
    }, 500);
  }, 6500);
});

/*
=================================
  Basic Stuff
=================================
*/
html,
body {
  background: rgba(117,189,209,1);
  background: linear-gradient(45deg,
    rgba(117,189,209,1) 0%,
    rgba(117,189,209,1) 11%,
    rgba(117,189,209,1) 16%,
    rgba(117,189,209,1) 16%,
    rgba(0,91,154,1) 98%,
    rgba(0,91,154,1) 100%);
  width: 100%;
  height: 100%;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}


/*
=================================
  iMac
=================================
*/

/* Screen */
.imac-screen {
  width: 560px;
  height: 350px;
  box-sizing: border-box;
  border-radius: 12px;
}

/* Display */
.display {
  position: relative;
  width: 100%;
  height: 300px;
  border: 20px solid;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-sizing: border-box;
  background: url('http://goo.gl/ciIqKe') no-repeat center;
  background-size: cover;
}
.display-bottom {
  background-color: #F6F7F8;
  width: 100%;
  height: 50px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Dock */
.dock {
  position: absolute;
  bottom: 0;
  left: 30%;
  width: 200px;
  height: 30px;
  background: rgba(221, 221, 221, 0.7);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.apps {
  display: flex;
  display: flex;
  justify-content: space-around;
  margin-top: 6px;
}
.apps div {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* App Colors */
.app-one   { background: #2980b9 }
.app-two   { background: #9b59b6 }
.app-three { background: #34495e }
.app-four  { background: #e74c3c }
.app-five  { background: #27ae60 }
.app-six   { background: #ecf0f1 }


/* iMac Stand */
.imac-stand {
  width: 120px;
  height: 55px;
  margin: 0 auto;
  background-color: #d1d1d1;
}
.imac-bottom-stand {
  background-color: #F6F7F8;
  width: 160px;
  height: 19px;
  border: 1px solid #ddd;
  margin: 0 auto;
}

/*
=================================
  Booting Styling
=================================
*/
.booting-loader {
  background-color: #2c3134;
  padding-top: 85px;
  text-align: center;
  z-index: 9999;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  box-sizing: border-box;
}
.booting-bar {
  position: relative;
  width: 200px;
  height: 10px;
  overflow: hidden;
  background-color: #252525;
  border-radius: 10px;
  border: 1px solid #3C3C3C;
  margin: 20px auto;
}
#booting {
  position: absolute;
  width: 10%;
  height: 100%;
  background-color: #fff;
}
.logo {
  font-size: 60px;
  color: #fff;
}

<!-- https://codepad.co/snippet/rOLYfcJY -->

<div class='imac'>
  <div class='imac-screen'>
    <div class='display'>
      <div class="booting-loader">
        <div class="logo">
          <i class="fa fa-apple" aria-hidden="true"></i>
        </div>
        <div class="booting-bar">
          <div id="booting">
          </div>
        </div>
      </div>
      <div class="dock">
        <div class="apps">
          <div class="app-one"></div>
          <div class="app-two"></div>
          <div class="app-three"></div>
          <div class="app-four"></div>
          <div class="app-five"></div>
          <div class="app-six"></div>
        </div>
      </div>
    </div>
    <div class="display-bottom"></div>
  </div>
  <div class='imac-stand'></div>
  <div class='imac-bottom-stand'></div>
</div>