<div class="thecube">
			<div class="cube c1"></div>
			<div class="cube c2"></div>
			<div class="cube c4"></div>
			<div class="cube c3"></div>
		</div>

<div class="textedit">
  <h1>The Cube Preloader</h1>
  <a href="http://morningtrain.dk/" target="_blank">Free to use, greetings from Morningtrain.dk</a>
</div>
$prim: #2BA0C7;

body{
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

h1{
  font-size:40px;
  text-align:center;
}

a{
  position:relative;
  display:block;
  text-align:center;
  color:#000;
  text-decoration:none;
  margin-top:15px;
}

.thecube {
    width: 75px;
    height: 75px;
    margin: 0 auto;
    margin-top: 50px;
    position: relative;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);

    .cube {
        position: relative;
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
    }

    .cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    .cube:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: $prim;
        -webkit-animation: foldthecube 2.4s infinite linear both;
        animation: foldthecube 2.4s infinite linear both;
        -webkit-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }

    .c2 {
        -webkit-transform: scale(1.1) rotateZ(90deg);
        transform: scale(1.1) rotateZ(90deg);
    }

    .c3 {
        -webkit-transform: scale(1.1) rotateZ(180deg);
        transform: scale(1.1) rotateZ(180deg);
    }

    .c4 {
        -webkit-transform: scale(1.1) rotateZ(270deg);
        transform: scale(1.1) rotateZ(270deg);
    }

    .c2:before {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .c3:before {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .c4:before {
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
    }

    @keyframes foldthecube {
        0%, 10% {
            -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
            opacity: 0;
        }

        25%,
        75% {
            -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
            opacity: 1;
        }

        90%,
        100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
    }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.