
.definejs-loading-ios {
    position: absolute;
    color: #fff;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 102px;
    transform: translate(-50%,-50%);
    z-index: 1024;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /**同一行的*/
    &.SameLine {

        .Main {
            margin-left: -34px;
            margin-top: -9px;
        }

        .Text {
            margin-top: 0px;
            margin-left: 26px;
        }
    }

    &.Pulldown {
        background: none;
        color: #000;
        font-size: 15px;
        margin-top: 0px;
        border-radius: 0px;
        height: 26px;
        width: 100%;
        z-index: 9999;
        left: 0px;
        top: 20px;
        transform: none;

    }

    &.Pullup {
        background: none;
        color: #000;
        font-size: 15px;
        margin-top: 0px;
        border-radius: 0px;
        height: 26px;
        width: 100%;
        z-index: 9999;
        left: 0px;
        top: unset;
        transform: none;
    }

    &.FullScreen {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        font-size: 15px;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        border-radius: 0;
    }
    /**无文本时*/
    &.NoText {
        width: 90px !important;
        height: 80px !important;
        margin-left: -45px !important;
        margin-top: -40px !important;

        .Main {
            margin-top: -12px;
        }

        .Text {
            display: none;
        }
    }

    .Text {
        display: inline-block;
        margin-top: 45px;
        text-align: center;
        font-family: "Microsoft YaHei", Helvetica, Arial, sans-serif;
    }

    .Main {
        display: block;
        position: absolute;
        width: 18px;
        height: 18px;
        left: 50%;
        top: 50%;
        margin-top: -16px;

        > div {
            position: absolute;
            background-color: #675e55;
            width: 2px;
            height: 5px;
            border-radius: 8px;
            -webkit-transform: scale(0.4);
            transform: scale(0.4);
            -webkit-animation: fadeG 1.1s linear infinite;
            -moz-transform: scale(0.4);
            -moz-animation: fadeG 1.1s linear infinite;
            -o-transform: scale(0.4);
            -o-animation: fadeG 1.1s linear infinite;
            -ms-transform: scale(0.4);
            -ms-animation: fadeG 1.1s linear infinite;
        }

        .Item (@delay, @deg,@a,@b) {
            -webkit-animation-delay: @delay;
            -webkit-transform: rotate(@deg) translate(@a,@b);
            -moz-animation-delay: @delay;
            -moz-transform: rotate(@deg) translate(@a,@b);
            -o-animation-delay: @delay;
            -o-transform: rotate(@deg) translate(@a,@b);
            -ms-animation-delay: @delay;
            -ms-transform: rotate(@deg) translate(@a,@b);
        }

        .Item-0 {
            .Item (0.1s,0deg,0,0);
        }

        .Item-1 {
            .Item (0.1s, 30deg,3.5px,-1px);
        }

        .Item-2 {
            .Item (0.2s, 60deg,6px,-4px);
        }

        .Item-3 {
            .Item (0.3s, 90deg,7px,-7px);
        }

        .Item-4 {
            .Item (0.4s, 120deg,6px,-11px);
        }

        .Item-5 {
            .Item (0.5s, 150deg,3.5px,-13px);
        }


        .Item-6 {
            .Item (0.5s, 0deg,0px,14px);
        }

        .Item-7 {
            .Item (0.6s, -150deg,-3.5px,-13px);
        }

        .Item-8 {
            .Item (0.7s, -120deg,-6px,-11px);
        }

        .Item-9 {
            .Item (0.8s, -90deg,-7px,-7px);
        }

        .Item-10 {
            .Item (0.9s, -60deg,-6px,-4px);
        }

        .Item-11 {
            .Item (1s, -30deg,-3.5px,-1px);
        }

        @-webkit-keyframes fadeG {
            0% {
                background-color: #fff;
            }

            100% {
                background-color: #675e55;
            }
        }

        @-moz-keyframes fadeG {
            0% {
                background-color: #fff;
            }

            100% {
                background-color: #675e55;
            }
        }

        @-o-keyframes fadeG {
            0% {
                background-color: #fff;
            }

            100% {
                background-color: #675e55;
            }
        }

        @-ms-keyframes fadeG {
            0% {
                background-color: #fff;
            }

            100% {
                background-color: #675e55;
            }
        }

        &.Large {
            width: 27px;
            height: 27px;
            margin-top: -24px;

            > div {
                border-radius: 100%;
                width: 3px;
                height: 8px;
            }

            .Item-0 {
                .Item (0s, 0deg,0px,0px);
            }

            .Item-1 {
                .Item (0.1s, 30deg,4.8px,-1.5px);
            }

            .Item-2 {
                .Item (0.2s, 60deg,8px,-5px);
            }

            .Item-3 {
                .Item (0.3s, 90deg,9px,-9px);
            }

            .Item-4 {
                .Item (0.4s, 120deg,8px,-14px);
            }

            .Item-5 {
                .Item (0.5s, 150deg,4.5px,-17px);
            }


            .Item-6 {
                .Item (0.5s, 0deg,0,18px);
            }

            .Item-7 {
                .Item (0.6s, -150deg,-4.5px,-17px);
            }

            .Item-8 {
                .Item (0.7s, -120deg,-8px,-14px);
            }

            .Item-9 {
                .Item (0.8s, -90deg,-9px,-9px);
            }

            .Item-10 {
                .Item (0.9s, -60deg,-8px,-5px);
            }

            .Item-11 {
                .Item (1s, -30deg,-4.8px,-1.5px);
            }
        }
    }
}
