@charset "UTF-8";

/**
 * Modal Loading Css Library
 * @author  c
 * @date    2017-11-06
 * @version 1.0.0
 */

.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(22, 22, 22, 0.2);*/
}

    .modal-mask .modal-loading {
        position: fixed;
        top: 0;
        left: 0;
        /*-webkit-border-radius: 12px;*/
        /*border-radius: 12px;*/
        /*padding: 5px 15px;*/
        /*background: rgb(49, 41, 35);*/
        text-align: center;
    }

        .modal-mask .modal-loading .loading-title {
            /*font-size: 1.4rem;*/
            /*color: #FFF;*/
        }


        .modal-mask .modal-loading .loading-discription {
            /*font-size: 1.2rem;*/
            /*color: #FFF;*/
        }

        /* start loading-animate */
        .modal-mask .modal-loading .loading-animate {
            /*width: 40px;*/
            /*height: 40px;*/
            background: transparent;
            position: relative;
            margin: 0 auto;
        }

            /* 图片加载动画 */
            .modal-mask .modal-loading .loading-animate img {
                width: 100%;
                height: 100%;
            }

            .modal-mask .modal-loading .loading-animate .animate-origin {
                width: 60%;
                height: 60%;
                position: absolute;
                left: 20%;
                top: 20%;
                opacity: 1;
                -webkit-animation: load 2.28s linear infinite;
                animation: load 2.28s linear infinite;
            }

                .modal-mask .modal-loading .loading-animate .animate-origin span {
                    display: block;
                    /*width: 4px;*/
                    /*height: 4px;*/
                    /*background: #FFF;*/
                    border-radius: 50%;
                }

                .modal-mask .modal-loading .loading-animate .animate-origin:nth-child(1) {
                    -webkit-animation-delay: 0.2s;
                    animation-delay: 0.2s;
                }

                .modal-mask .modal-loading .loading-animate .animate-origin:nth-child(2) {
                    -webkit-animation-delay: 0.4s;
                    animation-delay: 0.4s;
                }

                .modal-mask .modal-loading .loading-animate .animate-origin:nth-child(3) {
                    -webkit-animation-delay: 0.6s;
                    animation-delay: 0.6s;
                }

                .modal-mask .modal-loading .loading-animate .animate-origin:nth-child(4) {
                    -webkit-animation-delay: 0.8s;
                    animation-delay: 0.8s;
                }

                .modal-mask .modal-loading .loading-animate .animate-origin:nth-child(5) {
                    -webkit-animation-delay: 1s;
                    animation-delay: 1s;
                }

@-webkit-keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    10% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    50% {
        opacity: 1;
        -webkit-transform: rotate(160deg);
        transform: rotate(160deg);
    }

    62% {
        opacity: 0;
    }

    65% {
        opacity: 0;
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    10% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    50% {
        opacity: 1;
        -webkit-transform: rotate(160deg);
        transform: rotate(160deg);
    }

    62% {
        opacity: 0;
    }

    65% {
        opacity: 0;
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/* loading-animate end */

/* 水平布局 */
.modal-mask .modal-loading.modal-hor-layout .loading-title {
}

.modal-mask .modal-loading.modal-hor-layout .loading-animate {
    display: inline-block;
    vertical-align: middle;
}

.modal-mask .modal-loading.modal-hor-layout .loading-discription {
    display: inline-block;
    padding-left: 15px;
    /*font-size: 1.4rem;*/
}