.progress-button-style-rotate-side {
    &-down {
        .progress {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 20px;
            -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
            -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        &.state-loading .progress-wrap {
            -webkit-transform: rotateX(90deg) translateZ(10px);
            transform: rotateX(90deg) translateZ(10px);
        }
    }

    &-up {
        .progress {
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 100%;
            height: 20px;
            -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        &.state-loading .progress-wrap {
            -webkit-transform: rotateX(-90deg) translateZ(10px);
            transform: rotateX(-90deg) translateZ(10px);
        }
    }

    &-left {
        .progress-wrap {
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
        }

        .progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 100%;
            -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
        }

        &.state-loading .progress-wrap {
            -webkit-transform: translateX(50%) rotateY(90deg) translateZ(10px);
            transform: translateX(50%) rotateY(90deg) translateZ(10px);
        }
    }

    &-right {
        .progress-wrap {
            -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
        }

        .progress {
            position: absolute;
            top: 0;
            left: 100%;
            width: 20px;
            height: 100%;
            -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
            -webkit-transform-origin: 0 50%;
            transform-origin: 0 50%;
        }

        &.state-loading .progress-wrap {
            -webkit-transform: translateX(-50%) rotateY(-90deg) translateZ(10px);
            transform: translateX(-50%) rotateY(-90deg) translateZ(10px);
        }
    }
}