html {
    height: 100%;
    display: grid;
    place-items: center;
    background: #F0EDEE;
    font-family: Arial, sans-serif;
    margin: 0;
}

body {
    text-align: center;
    font-size: 1.5rem;
    color: #333;
    margin: 20px;
    max-width: 600px;}

.loader {
    height: 20%;
    aspect-ratio: 2;
    border-bottom: 3px solid #0000;
    background: 
        linear-gradient(90deg,#524656 50%,#0000 0)
        -25% 100%/50% 3px repeat-x border-box;
    position: relative;
    animation: l3-0 .75s linear infinite;
    margin: 0 auto 20px;
}
.loader:before {
    content: "";
    position: absolute;
    inset: auto 42.5% 0;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #CF4647;
    animation: l3-1 .75s cubic-bezier(0,900,1,900) infinite;
}
@keyframes l3-0 {
    to {background-position: -125% 100%}
}
@keyframes l3-1 {
    0%,2% {bottom: 0%}
    98%,to {bottom:.1%}
}