// Spinner Animation

.loader {
    .spinner {
        margin: 20px auto;
        width: 40px;
        height: 40px;
        position: relative;
        transform: rotateZ(45deg);

        &-cube {
            float: left;
            width: 50%;
            height: 50%;
            position: relative;
            transform: scale(1.1);

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #EEE;
                animation: spinnerAnimation 2.4s infinite linear both;
                transform-origin: 100% 100%;
            }
        }

        &-cube__2 {
            transform: scale(1.1) rotateZ(90deg);

            &:before {
                animation-delay: 0.3s;
            }
        }

        &-cube__3 {
            transform: scale(1.1) rotateZ(180deg);

            &:before {
                animation-delay: 0.6s;
            }
        }

        &-cube__4 {
            transform: scale(1.1) rotateZ(270deg);

            &:before {
                animation-delay: 0.9s;
            }
        }
    }
}


@-webkit-keyframes spinnerAnimation {
    0%, 10% {
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    } 25%, 75% {
          transform: perspective(140px) rotateX(0deg);
          opacity: 1;
      } 90%, 100% {
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
}

@keyframes spinnerAnimation {
    0%, 10% {
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    } 25%, 75% {
          transform: perspective(140px) rotateX(0deg);
          opacity: 1;
      } 90%, 100% {
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
}



// Blinking text animation
.blinkingText {
    &:after {
        content: "initializing";
        animation: blinkingTextAnimation 20s 1 linear both;
    }
}

@keyframes blinkingTextAnimation {
    0% { content: "initializing."; }
    10% { content: "initializing..";  }
    20% { content: "initializing...";  }
    30% { content: "initializing....";  }
    40% { content: "initializing.....";  }
    50% { content: "initializing......";  }
    60% { content: "initializing.......";  }
    70% { content: "initializing........";  }
    80% { content: "initializing.........";  }
    90% { content: "initializing..........";  }
    100% { content: "initializing...........";  }
}