@keyframes float {
    0% {  transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@-webkit-keyframes float {
    0% {  -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

body {
    background: #333;
    margin: 60px 0 0;
}

#loader {
    position: absolute;
    top:50%; left:50%;
    width:400px; height:100px;
    margin: -50px 0 0 -200px;
}
#loader:after {
    content: '';
    display: block;
    clear: both;
}

.portal {
    position: relative;
    height: 100px;
    width: 20px;
    border-radius: 50%;
}
.portal:before, .portal:after {
    content: '';
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    border-radius: 50%;
}

.portal.blue {
    float: left;
}
.portal.blue:before {
    border-left: 4px solid dodgerblue;
    background: linear-gradient(to right, rgba(30,144,255,.5), transparent);
    z-index: 3;
}
.portal.blue:after {
    border-right: 4px solid dodgerblue;
    box-shadow: 0 0 40px dodgerblue;
    z-index: 0;
}

.portal.red {
    float: right;
}
.portal.red:before {
    border-left: 4px solid orangered;
    box-shadow: 0 0 40px orangered;
    z-index: 0;
}
.portal.red:after {
    border-right: 4px solid orangered;
    background: linear-gradient(to left, rgba(255,69,0,.5), transparent);
    z-index: 3;
}

.cube {
    position: absolute;
    top:50%;
    left: -40px;
    margin-top:-20px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #eee url('http://t0.rbxcdn.com/3496591ea70995b3875cb6a3af51ee4e');
    background-size: cover;
    animation: float 4s linear infinite;
    -webkit-animation: float 4s linear infinite;
    z-index: 1;
}

.shade {
    position: absolute;
    width: 100px;
    height: 200%;
    top: 50%;
    margin-top: -25%;
    background: #333;
    z-index: 2;
}
.shade.left {
    right: 100%;
    margin-right: -10px;
}
.shade.right {
    left: 100%;
    margin-left: -10px;
}