.loader {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(0,0,0,0.8);
    z-index:2;
    display: flex;
    align-items: center; /* Vertical alignement */
    justify-content: center; /* Horizontal alignement */
}

.loader::after {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    content:'';
    display:block;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

.loader > span {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    z-index:3;
    display: flex;
    align-items: center; /* Vertical alignement */
    justify-content: center; /* Horizontal alignement */
    color:white;
    font-weight: bold;
    font-size: x-large;
    -webkit-text-fill-color: white; /* Will override color (regardless of order) */
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    -webkit-animation: bounce 2s linear infinite; /* Safari */
    animation: bounce 2s linear infinite;
    -webkit-animation: bounce .8s linear infinite;
    animation: bounce .8s linear infinite;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform:rotate(0deg);
    }
    to {
        -webkit-transform:rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

@-webkit-keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-5px);
    }
    50% {
        transform: translateY(5px);
    }
}