#do-not-hurry-up {
    align-items: center;
    background-color: #fff;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100000;
}

#do-not-hurry-up > .loading {
    border: 4px solid #bbb;
    border-radius: 50%;
    border-top-color: #777;
    height: 100px;
    width: 100px;
    animation: spin 1s infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

#do-not-hurry-up.loaded {
    background-color: rgba(255, 255, 255, 0.3);
}
#do-not-hurry-up.loaded > .loading {
    border: 7px solid rgba(0, 0, 0, .2);
    border-top-color: rgba(0, 0, 0, .4);
    box-shadow: 0 0 7px rgba(0, 0, 0, .3);
    height: 75px;
    width: 75px;
}

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