.progress-button {
    &-style-rotate-angle-bottom {
        .progress {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 20px;
            box-shadow: 0 -1px 0 #148544; /* fix the blurriness that causes a gap */
            -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
            -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
        }

        &.state-loading .progress-wrap {
            -webkit-transform: rotateX(45deg);
            transform: rotateX(45deg);
        }
    }

    &-style-rotate-angle-top {
        .progress {
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 100%;
            height: 20px;
            box-shadow: 0 1px 0 #148544; /* fix the blurriness that causes a gap */
            -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
        }

        &.state-loading .progress-wrap {
            -webkit-transform: rotateX(-45deg);
            transform: rotateX(-45deg);
        }
    }

    &-style-rotate-angle-left {
        .progress {
            position: absolute;
            top: 0;
            right: 100%;
            width: 20px;
            height: 100%;
            box-shadow: 1px 0 0 #148544; /* fix the blurriness that causes a gap */
            -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
            -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
        }

        &.state-loading .progress-wrap {
            -webkit-transform: rotateY(45deg);
            transform: rotateY(45deg);
        }
    }

    &-style-rotate-angle-right {
        .progress {
            position: absolute;
            top: 0;
            left: 100%;
            width: 20px;
            height: 100%;
            box-shadow: -1px 0 0 #148544; /* fix the blurriness that causes a gap */
            -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
            -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
        }

        &.state-loading .progress-wrap {
            -webkit-transform: rotateY(-45deg);
            transform: rotateY(-45deg);
        }
    }
}