<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
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.