<div class="loader"></div>

.loader {
  --s: 35px; /* the size of the wave */
  --b: 15px; /* the thickness of the line*/
  
  height: calc(2*var(--s));
  aspect-ratio: 2.5;
  display: grid;
  padding: 20px;
  filter: blur(7px) contrast(20) hue-rotate(20deg);
  background: #fff;
  mix-blend-mode: darken;
}
.loader::before{
  content: "";
  --_g: calc(-.6*var(--s)), #0000 calc(99% - var(--b)),red calc(101% - var(--b)) 99%,#0000 101%;
  --_r: calc(1.166*var(--s) + var(--b)/2) at left 50%;
  background :
    radial-gradient(var(--_r) bottom var(--_g)) 
      calc(50% - var(--s)) calc(50% - var(--s))/calc(4*var(--s)) calc(2*var(--s)),
    radial-gradient(var(--_r) top    var(--_g)) 
      calc(50% + var(--s)) calc(50% + var(--s))/calc(4*var(--s)) calc(2*var(--s));
  animation: m 1s infinite linear;
}
@keyframes m {
  to {
    background-position: 
      calc(50% - 5*var(--s)) calc(50% - var(--s)),
      calc(50% - 3*var(--s)) calc(50% + var(--s))
  }
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #F4EAD5;  
}
html {
  background:#fff;
}