$bezier: cubic-bezier(0.54,-0.24, 0.46, 1.28);
$easeIn: cubic-bezier(0.76,-0.01, 1, 1);
$easeOut: cubic-bezier(0, 0, 0.15, 1.01);
$ballSize: 1em;
$bounceTrack: $ballSize * 5;
$slowDuration: .9s;

article {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

button {
    border: 0;
    border-radius: 0;
    display: flex;
    justify-content: center;
    font-size: 1em;
    align-items: center;
    padding: 1em 1.5em;
    height: 1em;
    line-height: 1.2em;
    box-sizing: content-box;
    color: white;
    background-color: transparent;
    text-transform: uppercase;
    border: 1px solid white;
    font-family: inherit;
    transition: all ($slowDuration / 1.5) ease-in-out;
    &.active {
        color: red;
        background-color: white;
        pointer-events: none;
        opacity: .2;
    }
}

.preloader {
    font-size: 2em;
    $thisDuration: $slowDuration;
    &__ball {
        display: flex;
        position: relative;
        width: $ballSize;
        &:after,
        .ball {
            content: '';
            display: flex;
            border-radius: 50%;
            width: $ballSize;
            height: $ballSize;
        }
        .ball {
            background-color: white;
        }
        &:after {
            position: absolute;
            z-index: -1;
            background-color: black;
            bottom: 0;
            left: 50%;
            opacity: .25;
            transform: translate(-50%, ($ballSize / 2)) rotateX(70deg) scale(1);
        }
    }
    &--bounce {
        .preloader__ball {
            height: $bounceTrack;
            .ball {
                transform-origin: 50% 100%;
                // transform: translate(0, ($bounceTrack - $ballSize)) scaleY(1) scaleX(1);
                animation: bounceBall $thisDuration $easeOut infinite;
            }
            &:after {
                opacity: .25;
                transform: translate(-50%, ($ballSize / 2)) rotateX(70deg) scale(.9);
                animation: bounceBallShadow $thisDuration linear infinite;
            }
            &.end {
                &:after {
                    animation: none;
                    opacity: 0;
                }
                .ball {
                    animation: bounceBallExplode $thisDuration linear forwards;
                }
            }
        }
    }
    &--pendulum {
        $thisDuration: $thisDuration * 2;
        $bounceTrack: $ballSize * 2;
        display: flex;
        align-items: center;
        .preloader__ball {
            height: $bounceTrack;
            &:last-child,
            &:first-child {
                &:after,
                .ball{
                    animation: $thisDuration $easeOut infinite;
                }
                .ball{
                    transform-origin: 50% (-$bounceTrack);
                }
            }
            &:first-child {
                .ball {
                    animation-name: pendulumBallLeft;
                }
                &:after {
                    animation-name: pendulumBallLeftShadow;
                }
            }
            &:last-child {
                .ball {
                    animation-name: pendulumBallRight;
                }
                &:after {
                    animation-name: pendulumBallRightShadow;
                }
            }
        }
    }
    &--progress {
        $loadingColor: #BF3E47;
        position: relative;
        height: $ballSize / 5;
        width: 0;
        border-radius: $ballSize / 5;
        transition: width ($thisDuration / 3) cubic-bezier(0.79,-0.33, 0.21, 1.37);
        background-color: white;
        box-shadow: 0 ($ballSize - .05em) 0 -.05em #bf4c4a;
        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            background-image: linear-gradient($loadingColor 0, $loadingColor 100%);
            background-repeat: no-repeat;
            background-size: 0 100%;
            width: 100%;
            height: 100%;
            border-radius: $ballSize / 5;
            transition: background $thisDuration $easeOut;
            transition-delay: ($thisDuration * 18) / 100;
        }
        .preloader__ball {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-50%, calc(-50% - #{$ballSize / 20}));
            .ball {
                background-color: white;
                // background-color: $loadingColor;
                transform: scale(0);
            }
            &:after {
                opacity: 1;
                background-color: #bf4c4a;
                transform: translate(-50%, $ballSize) rotateX(70deg) scale(0);
            }
            &.active {
                animation: preloaderProgressBallMove $thisDuration $easeOut forwards;
                .ball {
                    animation: preloaderProgressBall $thisDuration linear forwards;
                }
                &:after {
                    animation: preloaderProgressBallShadow $thisDuration linear forwards;
                }
            }
            &.explode {
                left: 100%;
                &:after {
                    transform: translate(-50%, $ballSize) rotateX(70deg) scale(1);
                    animation: preloaderProgressBallShadowExplode $thisDuration linear forwards;
                    animation-delay: ($thisDuration / 3);
                }
                .ball {
                    transform: scale(1);
                    animation: preloaderProgressBallExplode $thisDuration linear forwards;
                    animation-delay: ($thisDuration / 3);
                }
            }
        }
        &.active {
            width: $bounceTrack * 1.5;
        }
        &.loading:before {
            background-size: 100% 100%;
        }
        &__status {
            position: absolute;
            min-width: 1em;
            min-height: 1em;
            width: 100%;
            height: 100%;
            left: 50%;
            transform: translate(-50%, calc(-50% - #{$ballSize / 20}));
            transition: all ($thisDuration * 1.25) ease-in-out;
            opacity: 0;
            &--item {
                transition: all ($thisDuration * 1.25) ease-in-out;
            }
            &.active { 
                animation: statusJump ($thisDuration / 2.5) $easeOut ($thisDuration / 2.5) forwards;
                .preloader--progress__status--item {
                    stroke-width: .1em;
                    transform: rotateY(360deg);
                }
            }
            &.hide .preloader--progress__status--item {
                opacity: 0;
            }
        }
    }
}

@keyframes bounceBallShadow {
    50% {
        opacity: .1;
        transform: translate(-50%, ($ballSize / 2)) rotateX(70deg) scale(.2);
    }
}

@keyframes bounceBall {
    0%,
    100% {
        transform: translate(0, ($bounceTrack - $ballSize)) scaleY(1) scaleX(1);
    }
    50% {
        animation-timing-function: $easeIn;
        transform: translate(0, 0) scaleY(1) scaleX(1);
    }
    96% {
        animation-timing-function: $easeOut;
        transform: translate(0, ($bounceTrack - $ballSize)) scaleY(1) scaleX(1);
    }
    98% {
        animation-timing-function: $easeOut;
        transform: translate(0, ($bounceTrack - $ballSize)) scaleY(.8) scaleX(1.2);
    }
}

@keyframes bounceBallExplode {
    0% {
        transform: translate(0, ($bounceTrack - $ballSize)) scale(1);
    }
    5% {
        transform: translate(0, ($bounceTrack - $ballSize)) scale(.8);
        opacity: 1;
    }
    10%,
    100% {
        transform: translate(0, ($bounceTrack - $ballSize)) scale(2);
        opacity: 0;
    }
}

@keyframes pendulumBallLeft {
    20% {
        animation-timing-function: $easeIn;
        transform: translate(0, (($ballSize * 2) - ($ballSize * 2))) rotate(90deg);
    }
    100%,
    50% {
        transform: translate(0, (($ballSize * 2) - ($ballSize * 2))) rotate(0);
    }
}
@keyframes pendulumBallRight {
    80% {
        animation-timing-function: $easeIn;
        transform: translate(0, (($ballSize * 2) - ($ballSize * 2))) rotate(-90deg);
    }
    100%,
    50% {
        transform: translate(0, (($ballSize * 2) - ($ballSize * 2))) rotate(0);
    }
}
@keyframes pendulumBallLeftShadow {
    20% {
        animation-timing-function: $easeIn;
        opacity: .1;
        transform: translate(-($bounceTrack - ($ballSize * 1.5)), ($ballSize / 2)) rotateX(70deg) scale(.4);
    }
    100%,
    50% {
        opacity: .25;
        transform: translate(-50%, ($ballSize / 2)) rotateX(70deg) scale(1);
    }
}
@keyframes pendulumBallRightShadow {
    80% {
        animation-timing-function: $easeIn;
        opacity: .1;
        transform: translate(($bounceTrack - ($ballSize * 2.8)), ($ballSize / 2)) rotateX(70deg) scale(.4);
    }
    100%,
    50% {
        opacity: .25;
        transform: translate(-50%, ($ballSize / 2)) rotateX(70deg) scale(1);
    }
}


@keyframes preloaderProgressBall {
    5% {
        transform: scale(1.2);
    }
    10% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.1);
    }
    20% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes preloaderProgressBallShadow {
    5% {
        transform: translate(-50%, $ballSize) rotateX(70deg) scale(1.2);
    }
    10% {
        transform: translate(-50%, $ballSize) rotateX(70deg) scale(1);
    }
    15% {
        transform: translate(-50%, $ballSize) rotateX(70deg) scale(1.1);
    }
    20% {
        transform: translate(-50%, $ballSize) rotateX(70deg) scale(1);
    }
    100% {
        transform: translate(-50%, $ballSize) rotateX(70deg) scale(1);
    }
}
@keyframes preloaderProgressBallMove {
    20% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}
@keyframes preloaderProgressBallExplode {
    0% {
        transform: scale(1);
    }
    5% {
        transform: scale(.8);
        opacity: 1;
    }
    10%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes preloaderProgressBallShadowExplode {
    0% {
        transform: translate(-50%, $ballSize) rotateX(70deg) scale(1);
    }
    5% {
        transform: translate(-50%, $ballSize) rotateX(70deg) scale(.8);
        opacity: 1;
    }
    10%,
    100% {
        transform: translate(-50%, $ballSize) rotateX(70deg) scale(2);
        opacity: 0;
    }
}
@keyframes progressBackground {
    100% {
        background-color: blue;
    }
}


@keyframes statusJump {
    0% {
        opacity: 0;
        transform: translate(-50%, calc((-50% - #{$ballSize / 20})));
    }
    50% {
        opacity: 1;
        animation-timing-function: $easeIn;
        transform: translate(-50%, calc((-50% - #{$ballSize / 20}) * 3));
    }
    80% {
        animation-timing-function: $easeOut;
        transform: translate(-50%, calc((-50% - #{$ballSize / 20})));
    }
    90% {
        animation-timing-function: $easeIn;
        transform: translate(-50%, calc((-50% - #{$ballSize / 20}) * 1.5));
    }
    100% {
        opacity: 1;
        transform: translate(-50%, calc((-50% - #{$ballSize / 20})));
    }
}