Car Driving Loader

<div class="ldr-car" role="status" aria-label="Loading">
  <span class="ldr-car-road"></span>
  <span class="ldr-car-body">
    <span class="ldr-car-wheel"></span><span class="ldr-car-wheel"></span>
  </span>
  <span class="ldr-car-wind"></span>
</div>

.ldr-car {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  --glass: color-mix(in srgb, var(--c) 25%, #fff);
  --tyre: color-mix(in srgb, var(--c) 45%, #000);
  position: relative;
  width: calc(var(--s) * 1.6);
  height: var(--s);
}
.ldr-car-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  height: calc(var(--s) / 22);
  overflow: hidden;
  border-radius: var(--s);
}
.ldr-car-road::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--s) * -0.4) 0 0;
  background: repeating-linear-gradient(to right, color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent) 0 calc(var(--s) * 0.2), transparent 0 calc(var(--s) * 0.4));
  animation: ldr-car-road 0.5s linear infinite;
}
.ldr-car-body {
  position: absolute;
  left: 22%;
  bottom: 26%;
  width: calc(var(--s) * 0.94);
  height: calc(var(--s) * 0.24);
  border-radius: calc(var(--s) * 0.07) calc(var(--s) * 0.12) calc(var(--s) * 0.05) calc(var(--s) * 0.05);
  background: var(--c);
  animation: ldr-car-bounce 0.5s ease-in-out infinite alternate;
}
.ldr-car-body::before {
  content: "";
  position: absolute;
  left: 14%;
  bottom: 90%;
  width: 58%;
  height: calc(var(--s) * 0.2);
  border-radius: calc(var(--s) * 0.1) calc(var(--s) * 0.14) 0 0;
  background:
    linear-gradient(var(--glass) 0 0) 16% 70% / 36% 58% no-repeat,
    linear-gradient(var(--glass) 0 0) 84% 70% / 36% 58% no-repeat,
    var(--c);
}
.ldr-car-body::after {
  content: "";
  position: absolute;
  right: 2%;
  top: 22%;
  width: calc(var(--s) * 0.06);
  height: calc(var(--s) * 0.05);
  border-radius: 50%;
  background: var(--glass);
}
.ldr-car-wheel {
  position: absolute;
  left: 12%;
  bottom: calc(var(--s) * -0.11);
  width: calc(var(--s) * 0.22);
  height: calc(var(--s) * 0.22);
  box-sizing: border-box;
  border: calc(var(--s) / 22) solid var(--tyre);
  border-radius: 50%;
  background: conic-gradient(var(--glass) 0 10%, var(--tyre) 0 25%, var(--glass) 0 35%, var(--tyre) 0 50%, var(--glass) 0 60%, var(--tyre) 0 75%, var(--glass) 0 85%, var(--tyre) 0);
  animation: ldr-car-spin 0.5s linear infinite;
}
.ldr-car-wheel + .ldr-car-wheel {
  left: auto;
  right: 12%;
}
.ldr-car-wind {
  position: absolute;
  left: 2%;
  top: 44%;
  width: calc(var(--s) * 0.22);
  height: calc(var(--s) / 22);
  border-radius: var(--s);
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 50%, transparent);
  box-shadow: calc(var(--s) * 0.06) calc(var(--s) * 0.12) 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  animation: ldr-car-wind 0.8s ease-out infinite;
}
@keyframes ldr-car-road {
  to { transform: translateX(calc(var(--s) * -0.4)); }
}
@keyframes ldr-car-bounce {
  from { transform: translateY(0) rotate(0); }
  to   { transform: translateY(calc(var(--s) * -0.03)) rotate(-1.5deg); }
}
@keyframes ldr-car-spin {
  to { transform: rotate(360deg); }
}
@keyframes ldr-car-wind {
  0%   { transform: translateX(calc(var(--s) * 0.12)); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(calc(var(--s) * -0.12)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-car, .ldr-car *, .ldr-car::before, .ldr-car::after, .ldr-car *::before, .ldr-car *::after {
    animation-duration: 3s;
  }
}

Similar loaders