.google-loader {
    display: block;
}
.google-loader span {
    display: inline-block;
    margin-top: 10px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
}
.google-loader span:not(:first-child) {
    margin-left: 10px;
}
.google-loader span:nth-child(1) {
    background: #4285f4;
    animation: move 1s ease-in-out -0.25s infinite alternate;
}
.google-loader span:nth-child(2) {
    background: #db4437;
    animation: move 1s ease-in-out -0.5s infinite alternate;
}
.google-loader span:nth-child(3) {
    background: #f4b400;
    animation: move 1s ease-in-out -0.75s infinite alternate;
}
.google-loader span:nth-child(4) {
    background: #0f9d58;
    animation: move 1s ease-in-out -1s infinite alternate;
}
@keyframes move {
    from {
        transform: translateY(-10px);
   }
    to {
        transform: translateY(5px);
   }
}
html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}