/**************************************
 * @ Obj        加载Loding
 * @ Authors    Enjoy
 * @ Email      524157223@qq.com
 * @ Web        http://www.benmao.vip
 **************************************/

/******************************************
 * @名称：circle Loader
 * @示例：<div class="circle-loading"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
 ******************************************/
.circle-loading {
    position: relative;
    width: auto;
    height: auto;
}

.circle-loading span {
    height: 10px;
    width: 10px;
    background-color: rgba(229,28,35,1);
    border-radius: 50%;
    position: absolute;
    -webkit-animation: 0.8s opaque ease-in-out infinite both;
    animation: 0.8s opaque ease-in-out infinite both;
}

.circle-loading>span:nth-child(1) {
    top: -25px;
    left: 0;
}

.circle-loading>span:nth-child(2) {
    top: -17px;
    left: 17px;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.circle-loading>span:nth-child(3) {
    top: 0;
    left: 25px;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.circle-loading>span:nth-child(4) {
    top: 17px;
    left: 17px;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.circle-loading>span:nth-child(5) {
    top: 25px;
    left: 0;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.circle-loading>span:nth-child(6) {
    top: 17px;
    left: -17px;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.circle-loading>span:nth-child(7) {
    top: 0;
    left: -25px;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.circle-loading>span:nth-child(8) {
    top: -17px;
    left: -17px;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

@-webkit-keyframes opaque {
    0% {
        opacity: 0.1;
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 0.1;
    }

    100% {
        opacity: 0.1;
    }
}

@keyframes opaque {
    0% {
        opacity: 0.1;
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 0.1;
    }

    100% {
        opacity: 0.1;
    }
}

/******************************************
 * @名称：Typing Loader
 * @示例：<div class="typing-loader"></div>
 ******************************************/
.typing-loader{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
       -moz-animation: Typing 1s linear infinite alternate;
            animation: typing 1s linear infinite alternate;
    margin: 10px auto; /* Not necessary- its only for layouting*/  
    position: relative;
    left: -12px;
}
@-webkit-keyframes typing{
    0%{
        background-color: rgba(229,28,35, 1);
        box-shadow: 12px 0px 0px 0px rgba(229,28,35,0.2), 
                    24px 0px 0px 0px rgba(229,28,35,0.2);
      }
    25%{ 
        background-color: rgba(229,28,35, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(229,28,35,2), 
                    24px 0px 0px 0px rgba(229,28,35,0.2);
    }
    75%{ background-color: rgba(229,28,35, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(229,28,35,0.2), 
                    24px 0px 0px 0px rgba(229,28,35,1);
      }
}

@-moz-keyframes typing{
   0%{
        background-color: rgba(229,28,35, 1);
        box-shadow: 12px 0px 0px 0px rgba(229,28,35,0.2), 
                    24px 0px 0px 0px rgba(229,28,35,0.2);
      }
    25%{ 
        background-color: rgba(229,28,35, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(229,28,35,2), 
                    24px 0px 0px 0px rgba(229,28,35,0.2);
    }
    75%{ background-color: rgba(229,28,35, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(229,28,35,0.2), 
                    24px 0px 0px 0px rgba(229,28,35,1);
      }
}

@keyframes typing{
   0%{
        background-color: rgba(229,28,35, 1);
        box-shadow: 12px 0px 0px 0px rgba(229,28,35,0.2), 
                    24px 0px 0px 0px rgba(229,28,35,0.2);
      }
    25%{ 
        background-color: rgba(229,28,35, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(229,28,35,2), 
                    24px 0px 0px 0px rgba(229,28,35,0.2);
    }
    75%{ background-color: rgba(229,28,35, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(229,28,35,0.2), 
                    24px 0px 0px 0px rgba(229,28,35,1);
      }
}
/******************************************
 * @名称：square Loader
 * @示例：<div class="square-loading"></div>
 ******************************************/
.square-loading{
    width: 20px;
    height: 20px;
    border:1px  rgba(229,28,35,1) solid;
    margin: 36px auto;
    position: relative;
    -webkit-animation: fill_color 5s linear infinite;
       -moz-animation: fill_color 5s linear infinite;
            animation: fill_color 5s linear infinite;
}
.square-loading:after{
    width: 4px;
    height: 4px;
    position: absolute;
    content: "";
    background-color: rgba(229,28,35,1);
    top: -8px;
    left: 0px;
    -webkit-animation: square_check 1s ease-in-out infinite;
       -moz-animation: square_check 1s ease-in-out infinite;
            animation: square_check 1s ease-in-out infinite;
}

@-webkit-keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}
@-moz-keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}
@keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}
@-webkit-keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(229,28,35,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(229,28,35,1);}
}
@-moz-keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(229,28,35,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(229,28,35,1);}
}
@keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(229,28,35,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(229,28,35,1);}
}

/******************************************
 * @名称：eye Loader
 * @示例：<div class="eye-loading"></div>
 ******************************************/
.eye-loading{
    width: 20px;
    height: 20px;
    background-color: rgba(229,51,51,0.3);
    border-radius: 50%;
    box-shadow: 30px 0px 0px 0px rgba(229,51,51,0.3);
    position: relative;
}

.eye-loading:after{
    background-color: rgba(229,51,51,1);
    width: 10px;
    height: 10px;
    box-shadow: 30px 0px 0px 0px rgba(229,51,51,1);
    border-radius: 50%;
    left: 9px;
    top: 8px;
    position: absolute;
    content: "";
    -webkit-animation: eyeball 2s linear infinite alternate;
       -moz-animation: eyeball 2s linear infinite alternate;
            animation: eyeball 2s linear infinite alternate;
}
@-webkit-keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}
@-moz-keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}
@keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}
/******************************************
 * @名称：coffee Loader
 * @示例：<div class="coffee-loading"></div>
 ******************************************/
.coffee-loading{
    width: 20px;
    height: 24px;
    border: 2px var(--Colors,#ff2d5a) solid;
    border-radius: 0px 0px 5px 5px;
    position: relative;
    margin: 10px auto;
}
.coffee-loading:after, .coffee-loading:before{
    position: absolute;
    content: "";
}
.coffee-loading:after{
    width: 5px;
    height: 12px;
    border: 2px var(--Colors,#ff2d5a) solid;
    border-left: none;
    border-radius: 0px 20px 20px 0px;
    left: 20px;
}
.coffee-loading:before{
    width: 1px;
    height: 6px;
    background-color: var(--Colors,#ff2d5a);
    top: -10px;
    left: 2.5px;
    box-shadow: 5px 0px 0px 0px var(--Colors,#ff2d5a),
                5px -5px 0px 0px var(--Colors,#ff2d5a),
                10px 0px 0px 0px var(--Colors,#ff2d5a);
    -webkit-animation: steam 1s linear infinite alternate;
       -moz-animation: steam 1s linear infinite alternate;
            animation: steam 1s linear infinite alternate;
}

@-webkit-keyframes steam{
    0%{height: 0px;}
    100%{height: 6px;}            
}
@-moz-keyframes steam{
    0%{height: 0px}
    100%{height: 6px;}            
}
@keyframes steam{
    0%{height: 0px}
    100%{height: 6px;}            
}
/******************************************
 * @名称：cloud Loader
 * @示例：<div class="cloud-loading"></div>
 ******************************************/
.cloud-loading{
    width: 4px;
    height: 10px;
    opacity: 0.5;
    position: relative;
    box-shadow: 6px 0px 0px 0px rgba(229,51,51,1),
                12px 0px 0px 0px rgba(229,51,51,1),
                18px 0px 0px 0px rgba(229,51,51,1),
                24px 0px 0px 0px rgba(229,51,51,1),
                30px 0px 0px 0px rgba(229,51,51,1),
                36px 0px 0px 0px rgba(229,51,51,1);
    
    -webkit-animation: rain 1s linear infinite alternate;
       -moz-animation: rain 1s linear infinite alternate;
            animation: rain 1s linear infinite alternate;
}
.cloud-loading:after{
    width: 40px;
    height: 10px;
    position: absolute;
    content: "";
    background-color: rgba(229,51,51,1);
    top: 0px;
    left:-34px;
    opacity: 1;
    -webkit-animation: line_flow 2s linear infinite reverse;
       -moz-animation: line_flow 2s linear infinite reverse;
            animation: line_flow 2s linear infinite reverse;
}

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

@-webkit-keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}
@-moz-keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}
@keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}
/******************************************
 * @名称：battery Loader
 * @示例：<div class="battery-loading"></div>
 ******************************************/
.battery-loading{
    width: 28px;
    height: 14px;
    border: 1px var(--Colors,#ff2d5a) solid;
    border-radius: 2px;
    position: relative;
    -webkit-animation: charge 5s linear infinite;
       -moz-animation: charge 5s linear infinite;
            animation: charge 5s linear infinite;
    top: 40px;
    margin: 0 auto;
}
.battery-loading:after{
    width: 2px;
    height: 7px;
    background-color: var(--Colors,#ff2d5a);
    border-radius: 0px 1px 1px 0px;
    position: absolute;
    content: "";
    top: 2px;
    right: -4px;
}
@-webkit-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px var(--Colors,#ff2d5a);}
}
@-moz-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px var(--Colors,#ff2d5a);}
}
@keyframes charge{
    0%{box-shadow: inset 0px 0px 0px var(--Colors,#ff2d5a);}
    100%{box-shadow: inset 30px 0px 0px var(--Colors,#ff2d5a);}
}