.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; } }