<div id="loader">
  <div class="shadow"></div>
  <div id="portalcube">
    <div class="squares">
      <div class="box"></div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="circle">
      <div class="heart"></div>
    </div>
  </div>
</div>

body, html {
  background-color: #333333;
  background: radial-gradient(ellipse at center, #333333 0%,#2e2e2e 100%);
  width:100%;
  height:100%;
  margin: 0;
}

#portalcube {
  animation-timing-function:cubic-bezier(0.5,1,0.75,0);
  animation: bounce .7s infinite;
  
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-35px;
  
}
#portalcube .circle {
  background-color: #cccccc;
  width: 30px;
  height: 30px;
  border: 3px solid #333333;
  border-radius: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -17px;
  margin-left: -18px;
  line-height: 35px;
  text-align: center;
  font-size: 20px;
  color: #333333;
  animation-timing-function:cubic-bezier(0,.5,.7,1);
  animation: circlebounce .7s infinite;
}
#portalcube .squares {
  position:absolute;
  left:50%;
  top:50%;
  animation-timing-function:cubic-bezier(1,1,1,1);
  animation: rotates .7s infinite;
  width:1px;
  height:1px;
  background-color: #000;
}

#portalcube .box {
  background-color: #cccccc;
  width: 56px;
  height: 56px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left:-28px;
  margin-top:-28px;
}
#portalcube ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#portalcube ul li {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 29px;
  height: 29px;
  background-color: #cccccc;
  border-radius: 7px;
  border: 2px solid #333333;
}
#portalcube ul li:nth-child(4n + 1) {
  margin-top: -35px;
  margin-left: -35px;
}
#portalcube ul li:nth-child(4n + 2) {
  margin-top: -35px;
  margin-left: 1px;
}
#portalcube ul li:nth-child(4n + 3) {
  margin-top: 1px;
  margin-left: 1px;
}
#portalcube ul li:nth-child(4n + 4) {
  margin-top: 1px;
  margin-left: -35px;
}

#loader {
  position:absolute;
  width:90px;
  height:90px;
  left:50%;
  top:50%;x
}

.shadow {
  width: 90px;
  height: 1px;
  background-color: rgba(0,0,0,.3);
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-77px;
  margin-top:-10px;
  box-shadow:0 0 5px rgba(0,0,0,1);
  transform:scale(.7);
  animation-timing-function:cubic-bezier(0,0,.1,1);
  animation:shadowresize .7s infinite;
}

#heart {
  position: relative;
  width: 50px;
  height: 45px;
}
.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 15px;
  top: 8px;
  width: 9px;
  height: 15px;
  background: #cc0000;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 7px;
  transform: rotate(45deg);
  transform-origin :100% 100%;
}
@keyframes rotates {
  from {transform: rotate(0deg);}
  to {transform: rotate(90deg);}
}
@keyframes bounce {
  0% {margin-top:-45px;}
  50% {margin-top:-55px;}
  100% {margin-top:-45px;}
}
@keyframes circlebounce {
  0% {margin-top:-17px;}
  50% {margin-top:-23px;}
  100% {margin-top:-17px;}
}
@keyframes shadowresize {
  0% {transform:scale(.6);}
  30% {transform:scale(.2);}
  100% {transform:scale(.6);}
}

/*
Created by Max Litruv Boonzaayer
  http://litruv.com

Uses -prefix-free
  https://leaverou.github.io/prefixfree/

Tested in: - Chrome 31.0.1650.63 m
           - Firefox 26
*/