
.cssload-battery {
    display: block;
    margin: 175px auto;
    position: relative;
    width: 4.25rem;
    height: 7.5rem;
    box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
    -o-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
    -ms-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
    -webkit-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
    -moz-box-shadow: 0 0 0 0.2rem rgb(66, 92, 119);
    border-radius: 0.09rem;
    -o-border-radius: 0.09rem;
    -ms-border-radius: 0.09rem;
    -webkit-border-radius: 0.09rem;
    -moz-border-radius: 0.09rem;
    background: white;
}

.cssload-battery:before {
    content: '';
    position: absolute;
    left: 0.8625rem;
    right: 0.5625rem;
    top: -0.8375rem;
    height: 0.7375rem;
    width: 2.125rem;
    background: rgb(66, 92, 119);
    border-radius: 0.18rem;
    -o-border-radius: 0.18rem;
    -ms-border-radius: 0.18rem;
    -webkit-border-radius: 0.18rem;
    -moz-border-radius: 0.18rem;
}

.cssload-battery:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-right: 4.25rem solid transparent;
    border-bottom: 7.05rem solid rgba(255, 255, 255, 0.325);
}

.cssload-liquid {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 4.25rem;
    background: rgb(113, 251, 133);
    animation: load 5.96s infinite;
    -o-animation: load 5.96s infinite;
    -ms-animation: load 5.96s infinite;
    -webkit-animation: load 5.96s infinite;
    -moz-animation: load 5.96s infinite;
}

.cssload-liquid:after, .cssload-liquid:before {
    content: '';
    position: absolute;
    top: -0.5rem;
    height: 2.125rem;
    width: 2.4625rem;
    background: rgb(113, 251, 133);
    opacity: 0;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.cssload-liquid:after {
    right: 0;
    animation: cssload-liquid-1 5.96s infinite;
    -o-animation: cssload-liquid-1 5.96s infinite;
    -ms-animation: cssload-liquid-1 5.96s infinite;
    -webkit-animation: cssload-liquid-1 5.96s infinite;
    -moz-animation: cssload-liquid-1 5.96s infinite;
}

.cssload-liquid:before {
    left: 0;
    animation: cssload-liquid-2 5.96s infinite;
    -o-animation: cssload-liquid-2 5.96s infinite;
    -ms-animation: cssload-liquid-2 5.96s infinite;
    -webkit-animation: cssload-liquid-2 5.96s infinite;
    -moz-animation: cssload-liquid-2 5.96s infinite;
}

@keyframes load {
    0% {
        top: 7.5rem;
    }
    70% {
        top: 2.125rem;
    }
    90% {
        top: 0;
    }
    95% {
        top: 0;
    }
    100% {
        top: 7.5rem;
    }
}

@-o-keyframes load {
    0% {
        top: 7.5rem;
    }
    70% {
        top: 2.125rem;
    }
    90% {
        top: 0;
    }
    95% {
        top: 0;
    }
    100% {
        top: 7.5rem;
    }
}

@-ms-keyframes load {
    0% {
        top: 7.5rem;
    }
    70% {
        top: 2.125rem;
    }
    90% {
        top: 0;
    }
    95% {
        top: 0;
    }
    100% {
        top: 7.5rem;
    }
}

@-webkit-keyframes load {
    0% {
        top: 7.5rem;
    }
    70% {
        top: 2.125rem;
    }
    90% {
        top: 0;
    }
    95% {
        top: 0;
    }
    100% {
        top: 7.5rem;
    }
}

@-moz-keyframes load {
    0% {
        top: 7.5rem;
    }
    70% {
        top: 2.125rem;
    }
    90% {
        top: 0;
    }
    95% {
        top: 0;
    }
    100% {
        top: 7.5rem;
    }
}

@keyframes cssload-liquid-1 {
    0% {
        height: 0;
        opacity: 0;
        top: -0.5rem;
    }
    22% {
        height: 0.28125rem;
        top: 0.375rem;
        opacity: 1;
    }
    25% {
        top: -0.25rem;
    }
    35% {
        height: 2.125rem;
        top: -0.5rem;
    }
    55% {
        height: 0.28125rem;
        top: -0.125rem;
    }
    60% {
        height: 0.61875rem;
        opacity: 1;
        top: -0.275rem;
    }
    96% {
        height: 1.84375rem;
        opacity: 0;
        top: 0.5rem;
    }
    100% {
        height: 0;
        opacity: 0;
    }
}

@-o-keyframes cssload-liquid-1 {
    0% {
        height: 0;
        opacity: 0;
        top: -0.5rem;
    }
    22% {
        height: 0.28125rem;
        top: 0.375rem;
        opacity: 1;
    }
    25% {
        top: -0.25rem;
    }
    35% {
        height: 2.125rem;
        top: -0.5rem;
    }
    55% {
        height: 0.28125rem;
        top: -0.125rem;
    }
    60% {
        height: 0.61875rem;
        opacity: 1;
        top: -0.275rem;
    }
    96% {
        height: 1.84375rem;
        opacity: 0;
        top: 0.5rem;
    }
    100% {
        height: 0;
        opacity: 0;
    }
}

@-ms-keyframes cssload-liquid-1 {
    0% {
        height: 0;
        opacity: 0;
        top: -0.5rem;
    }
    22% {
        height: 0.28125rem;
        top: 0.375rem;
        opacity: 1;
    }
    25% {
        top: -0.25rem;
    }
    35% {
        height: 2.125rem;
        top: -0.5rem;
    }
    55% {
        height: 0.28125rem;
        top: -0.125rem;
    }
    60% {
        height: 0.61875rem;
        opacity: 1;
        top: -0.275rem;
    }
    96% {
        height: 1.84375rem;
        opacity: 0;
        top: 0.5rem;
    }
    100% {
        height: 0;
        opacity: 0;
    }
}

@-webkit-keyframes cssload-liquid-1 {
    0% {
        height: 0;
        opacity: 0;
        top: -0.5rem;
    }
    22% {
        height: 0.28125rem;
        top: 0.375rem;
        opacity: 1;
    }
    25% {
        top: -0.25rem;
    }
    35% {
        height: 2.125rem;
        top: -0.5rem;
    }
    55% {
        height: 0.28125rem;
        top: -0.125rem;
    }
    60% {
        height: 0.61875rem;
        opacity: 1;
        top: -0.275rem;
    }
    96% {
        height: 1.84375rem;
        opacity: 0;
        top: 0.5rem;
    }
    100% {
        height: 0;
        opacity: 0;
    }
}

@-moz-keyframes cssload-liquid-1 {
    0% {
        height: 0;
        opacity: 0;
        top: -0.5rem;
    }
    22% {
        height: 0.28125rem;
        top: 0.375rem;
        opacity: 1;
    }
    25% {
        top: -0.25rem;
    }
    35% {
        height: 2.125rem;
        top: -0.5rem;
    }
    55% {
        height: 0.28125rem;
        top: -0.125rem;
    }
    60% {
        height: 0.61875rem;
        opacity: 1;
        top: -0.275rem;
    }
    96% {
        height: 1.84375rem;
        opacity: 0;
        top: 0.5rem;
    }
    100% {
        height: 0;
        opacity: 0;
    }
}

@keyframes cssload-liquid-2 {
    0% {
        height: 0;
        opacity: 0;
        top: -0.5rem;
    }
    17.5% {
        height: 0.28125rem;
        top: 0.2rem;
        opacity: 1;
    }
    20% {
        top: -0.25rem;
    }
    25% {
        height: 2.40625rem;
        top: -0.625rem;
    }
    45% {
        height: 0.28125rem;
        top: -0.125rem;
    }
    60% {
        height: 2.40625rem;
        opacity: 1;
        top: -0.5rem;
    }
    96% {
        height: 1.84375rem;
        opacity: 0;
        top: 0.5rem;
    }
    100% {
        height: 0;
        opacity: 0;
    }
}

@-o-keyframes cssload-liquid-2 {
    0% {
        height: 0;
        opacity: 0;
        top: -0.5rem;
    }
    17.5% {
        height: 0.28125rem;
        top: 0.2rem;
        opacity: 1;
    }
    20% {
        top: -0.25rem;
    }
    25% {
        height: 2.40625rem;
        top: -0.625rem;
    }
    45% {
        height: 0.28125rem;
        top: -0.125rem;
    }
    60% {
        height: 2.40625rem;
        opacity: 1;
        top: -0.5rem;
    }
    96% {
        height: 1.84375rem;
        opacity: 0;
        top: 0.5rem;
    }
    100% {
        height: 0;
        opacity: 0;
    }
}

@-ms-keyframes cssload-liquid-2 {
    0% {
        height: 0;
        opacity: 0;
        top: -0.5rem;
    }
    17.5% {
        height: 0.28125rem;
        top: 0.2rem;
        opacity: 1;
    }
    20% {
        top: -0.25rem;
    }
    25% {
        height: 2.40625rem;
        top: -0.625rem;
    }
    45% {
        height: 0.28125rem;
        top: -0.125rem;
    }
    60% {
        height: 2.40625rem;
        opacity: 1;
        top: -0.5rem;
    }
    96% {
        height: 1.84375rem;
        opacity: 0;
        top: 0.5rem;
    }
    100% {
        height: 0;
        opacity: 0;
    }
}

@-webkit-keyframes cssload-liquid-2 {
    0% {
        height: 0;
        opacity: 0;
        top: -0.5rem;
    }
    17.5% {
        height: 0.28125rem;
        top: 0.2rem;
        opacity: 1;
    }
    20% {
        top: -0.25rem;
    }
    25% {
        height: 2.40625rem;
        top: -0.625rem;
    }
    45% {
        height: 0.28125rem;
        top: -0.125rem;
    }
    60% {
        height: 2.40625rem;
        opacity: 1;
        top: -0.5rem;
    }
    96% {
        height: 1.84375rem;
        opacity: 0;
        top: 0.5rem;
    }
    100% {
        height: 0;
        opacity: 0;
    }
}

@-moz-keyframes cssload-liquid-2 {
    0% {
        height: 0;
        opacity: 0;
        top: -0.5rem;
    }
    17.5% {
        height: 0.28125rem;
        top: 0.2rem;
        opacity: 1;
    }
    20% {
        top: -0.25rem;
    }
    25% {
        height: 2.40625rem;
        top: -0.625rem;
    }
    45% {
        height: 0.28125rem;
        top: -0.125rem;
    }
    60% {
        height: 2.40625rem;
        opacity: 1;
        top: -0.5rem;
    }
    96% {
        height: 1.84375rem;
        opacity: 0;
        top: 0.5rem;
    }
    100% {
        height: 0;
        opacity: 0;
    }
}