html,
body {
    height: 100%;
}
body {
    overflow: hidden;
}
.hoja {
    color: #dcdce2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -115px;
    margin-top: -115px;
    width: 230px;
    height: 230px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 28.75px;
    line-height: 230px;
    -webkit-font-smoothing: antialiased;
}
.hoja:after,
.hoja:before {
    content: "";
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center;
}

.hoja:after {
    box-shadow: inset 0 16.1971831px 0 rgba(0, 190, 250, 0.6), inset 16.1971831px 0 0 rgba(0, 190, 200, 0.6), inset 0 -16.1971831px 0 rgba(0, 190, 250, 0.5), inset -16.1971831px 0 0 rgba(0, 190, 200, 0.6);
    -webkit-animation: rotar 3.5s -0.5s linear infinite;
    animation: rotar 3.5s -0.5s linear infinite;
}
.hoja:before {
    box-shadow: inset 0 16.1971831px 0 rgba(0, 190, 200, 0.6), inset 16.1971831px 0 0 rgba(0, 200, 255, 0.6), inset 0 -16.1971831px 0 rgba(0, 190, 200, 0.6), inset -16.1971831px 0 0 rgba(0, 240, 255, 0.2);
    -webkit-animation: rotarIz 3.5s -0.5s linear infinite;
    animation: rotarIz 3.5s -0.5s linear infinite;
}
@-webkit-keyframes rotar {
    0% {
        transform: rotateZ(0deg) scaleX(1) scaleY(1);
    }
    50% {
        transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
    }
    100% {
        transform: rotateZ(360deg) scaleX(1) scaleY(1);
    }
}
@keyframes rotar {
    0% {
        transform: rotateZ(0deg) scaleX(1) scaleY(1);
    }
    50% {
        transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
    }
    100% {
        transform: rotateZ(360deg) scaleX(1) scaleY(1);
    }
}
@-webkit-keyframes rotarIz {
    0% {
        transform: rotateZ(0deg) scaleX(1) scaleY(1);
    }
    50% {
        transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
    }
    100% {
        transform: rotateZ(-360deg) scaleX(1) scaleY(1);
    }
}
@keyframes rotarIz {
    0% {
        transform: rotateZ(0deg) scaleX(1) scaleY(1);
    }
    50% {
        transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
    }
    100% {
        transform: rotateZ(-360deg) scaleX(1) scaleY(1);
    }
}