Display an SVG loader with animated stroke dashoffset.

by AntowaKartowa

HTML

<svg
  viewBox="0 0 24 24"
  xmlns="http://www.w3.org/2000/svg"
  preserveAspectRation="xMidYMid meet"
>
  <path
    d="M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8"
    fill="none"
    stroke="#1d2628"
    stroke-width="1"
    stroke-linecap="round"
    stroke-linejoin="round"
  ></path>
  <path
    id="loading-path"
    d="M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8"
    fill="none"
    stroke="#ff0088"
    stroke-width="1"
    stroke-linecap="round"
    stroke-linejoin="round"
    opacity="0"
    style="opacity: 1;"
    pathLength="100"
    stroke-dasharray="25 75"
  ></path>
</svg>

CSS

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  justify-content: center;
  align-items: center;
  background-color: #0b1012;
}

svg {
  width: 200px;
  height: 200px;
}

#loading-path {
  animation: loading-path 1s linear infinite;
  will-change: stroke-dashoffset;
}

@keyframes loading-path {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; }
}