/*动画最外部容器，可定位*/
.loadingWrapper_schedule {

    width: 500px;
    height: 500px;
}

/*中间盒子*/
.contenting {
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 1111111;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;

}

/*承载动画外层盒子*/
.span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    background-color: rgba(0, 0, 0, 0);
    height: 100px;
    border-radius: 1px;

}

/*底部亮条*/
.cloud {
    width: 4px;
    height: 10px;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -5px;
    box-shadow: 6px 0px 0px 0px rgba(0, 0, 0, 1),
    12px 0px 0px 0px rgba(0, 0, 0, 1),
    18px 0px 0px 0px rgba(0, 0, 0, 1),
    24px 0px 0px 0px rgba(0, 0, 0, 1),
    30px 0px 0px 0px rgba(0, 0, 0, 1),
    36px 0px 0px 0px rgba(0, 0, 0, 1);

    -webkit-animation: rain 1s linear infinite;
    -moz-animation: rain 1s linear infinite;
    animation: rain 1s linear infinite;
}

/*进度条*/
.cloudAfter {

    width: 40px;
    height: 10px;
    position: absolute;
    content: "";
    background-color: #2196f3;

    top: 0px;
    opacity: 1;
    -webkit-animation: line_flow 1s linear infinite reverse;
    -moz-animation: line_flow 1s linear infinite reverse;
    animation: line_flow 1s linear infinite reverse;
}

@-webkit-keyframes rain {
    0% {

        box-shadow: 6px 0px 0px 0px rgba(0, 0, 0, 0.3),
        12px 0px 0px 0px rgba(0, 0, 0, 0.4),
        18px 0px 0px 0px rgba(0, 0, 0, 0.5),
        24px 0px 0px 0px rgba(0, 0, 0, 0.5),
        30px 0px 0px 0px rgba(0, 0, 0, 0.6),
        36px 0px 0px 0px rgba(0, 0, 0, 0.5);

    }
    100% {

        box-shadow: 6px 0px 0px 0px rgba(0, 0, 0, 1),
        12px 0px 0px 0px rgba(0, 0, 0, 1),
        18px 0px 0px 0px rgba(0, 0, 0, 1),
        24px 0px 0px 0px rgba(0, 0, 0, 1),
        30px 0px 0px 0px rgba(0, 0, 0, 1),
        36px 0px 0px 0px rgba(0, 0, 0, 1);
        opacity: 1;
    }
}

@-moz-keyframes rain {
    0% {
        box-shadow: 6px 0px 0px 0px rgba(0, 0, 0, 0.3),
        12px 0px 0px 0px rgba(0, 0, 0, 0.3),
        18px 0px 0px 0px rgba(0, 0, 0, 0.4),
        24px 0px 0px 0px rgba(0, 0, 0, 0.5),
        30px 0px 0px 0px rgba(0, 0, 0, 0.6),
        36px 0px 0px 0px rgba(0, 0, 0, 0.7);
    }
    100% {
        box-shadow: 6px 0px 0px 0px rgba(0, 0, 0, 1),
        12px 0px 0px 0px rgba(0, 0, 0, 1),
        18px 0px 0px 0px rgba(0, 0, 0, 1),
        24px 0px 0px 0px rgba(0, 0, 0, 1),
        30px 0px 0px 0px rgba(0, 0, 0, 1),
        36px 0px 0px 0px rgba(0, 0, 0, 1);
        opacity: 1;
    }
}

@keyframes rain {
    0% {

        box-shadow: 6px 0px 0px 0px rgba(0, 0, 0, 0.3),
        12px 0px 0px 0px rgba(0, 0, 0, 0.4),
        18px 0px 0px 0px rgba(0, 0, 0, 0.5),
        24px 0px 0px 0px rgba(0, 0, 0, 0.5),
        30px 0px 0px 0px rgba(0, 0, 0, 0.6),
        36px 0px 0px 0px rgba(0, 0, 0, 0.5);

    }
    100% {

        box-shadow: 6px 0px 0px 0px rgba(0, 0, 0, 1),
        12px 0px 0px 0px rgba(0, 0, 0, 1),
        18px 0px 0px 0px rgba(0, 0, 0, 1),
        24px 0px 0px 0px rgba(0, 0, 0, 1),
        30px 0px 0px 0px rgba(0, 0, 0, 1),
        36px 0px 0px 0px rgba(0, 0, 0, 1);
        opacity: 1;
    }
}

@-webkit-keyframes line_flow {
    0% {
        width: 40px;
    }
    100% {
        width: 0px;
    }
}

@-moz-keyframes line_flow {
    0% {
        width: 40px;
    }
    100% {
        width: 0px;
    }
}

@keyframes line_flow {
    0% {
        width: 40px;
    }
    100% {
        width: 0px;
    }
}

/*rotate animate*/
/*初始化页面。最外层包裹warpper*/

.loader_rotate_bg {
    width: 100%;
    height: 100%;

}

/*包裹动画盒子*/
.loader_rotate_warpper {
    position: absolute;
    left: 50%;
    top: 40%;
    margin-left: -150px;
    margin-top: -150px;
    width: 300px;
    height: 300px;

}

.rotate_loaderChildren_inner {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    left: 50%;
    top: 50%;
    height: 26px;
    width: 26px;
    margin-top: -13px;
    margin-left: -13px;
    -webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
    animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
    color: #2196f3;

}

.rotate_loaderChildren_outer {
    position: absolute;
    //border-radius: 50%;
    position: absolute;
    width: 46px;
    height: 46px;
    left: 50%;
    top: 50%;
    margin-top: -23px;
    margin-left: -23px;
    //border: 2px solid;
    //border-color: #2196f3 transparent #2196f3 transparent;
     -webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
        animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
        -webkit-animation-duration: 1s;
     animation-duration: 1s;
    color:#2196f3;
    //border: solid 1px;
    //box-shadow: 0  8px 0px -6px #2196f3,
    //    0 -8px 0px -6px #2196f3;

}

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

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

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

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

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

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

@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    45% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0.7;
    }

    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    45% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 0.7;
    }

    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}