CodePen Embed - SVG Loading Animation

<svg id="loading" width="320" height="320">
  <defs>
    <path id="pathCircle" d="M 160,160
             m -160,0
             a 160,160 0, 1, 0, 320,0
             a 160,160 0, 1, 0, -320,0
             Z"></path>
  </defs>
  <circle cx="160" cy="160" r="5" fill="#CCC" />
  <circle cx="160" cy="160" r="10" stroke="#CCC" stroke-width="0.1" fill="none" />
  <circle cx="160" cy="160" r="12" stroke="#CCC" stroke-width="0.1" fill="none" />
  <circle cx="160" cy="160" r="18" stroke="#CCC" stroke-width="0.1" fill="none" />
  <circle cx="160" cy="160" r="30" stroke="#CCC" stroke-width="0.1" fill="none" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(0 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(30 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(60 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(90 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(0 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(120 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(150 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(180 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(210 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(240 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(270 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(300 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <use href="#pathCircle" fill="none" stroke-width=".1" stroke="#CCC" transform="rotate(330 160 160)
                translate(0 106.72)
                scale(1 0.333)" />
  <g transform="rotate(0 160 160)
                translate(0 106.72)
                scale(1 0.333)">
    <circle r="2" fill="#EEE" stroke-width="0" transform="scale(1 3)">
      <animateMotion dur="2s" repeatCount="indefinite">
        <mpath xlink:href="#pathCircle" />
      </animateMotion>
    </circle>
  </g>
  <g transform="rotate(30 160 160)
                translate(0 106.72)
                scale(1 0.333)">
    <circle r="2" fill="#EEE" stroke-width="0" transform="scale(1 3)">
      <animateMotion dur="3s" repeatCount="indefinite">
        <mpath xlink:href="#pathCircle" />
      </animateMotion>
    </circle>
  </g>
  <g transform="rotate(60 160 160)
                translate(0 106.72)
                scale(1 0.333)">
    <circle r="2" fill="#EEE" stroke-width="0" transform="scale(1 3)">
      <animateMotion dur="5s" repeatCount="indefinite">
        <mpath xlink:href="#pathCircle" />
      </animateMotion>
    </circle>
  </g>
  <g transform="rotate(90 160 160)
                translate(0 106.72)
                scale(1 0.333)">
    <circle r="2" fill="#EEE" stroke-width="0" transform="scale(1 3)">
      <animateMotion dur="2s" repeatCount="indefinite">
        <mpath xlink:href="#pathCircle" />
      </animateMotion>
    </circle>
  </g>
  <g transform="rotate(120 160 160)
                translate(0 106.72)
                scale(1 0.333)">
    <circle r="2" fill="#EEE" stroke-width="0" transform="scale(1 3)">
      <animateMotion dur="3s" repeatCount="indefinite">
        <mpath xlink:href="#pathCircle" />
      </animateMotion>
    </circle>
  </g>
  <g transform="rotate(150 160 160)
                translate(0 106.72)
                scale(1 0.333)">
    <circle r="2" fill="#EEE" stroke-width="0" transform="scale(1 3)">
      <animateMotion dur="5s" repeatCount="indefinite">
        <mpath xlink:href="#pathCircle" />
      </animateMotion>
    </circle>
  </g>
  <g transform="rotate(180 160 160)
                translate(0 106.72)
                scale(1 0.333)">
    <circle r="2" fill="#EEE" stroke-width="0" transform="scale(1 3)">
      <animateMotion dur="2s" repeatCount="indefinite">
        <mpath xlink:href="#pathCircle" />
      </animateMotion>
    </circle>
  </g>
  <g transform="rotate(210 160 160)
                translate(0 106.72)
                scale(1 0.333)">
    <circle r="2" fill="#EEE" stroke-width="0" transform="scale(1 3)">
      <animateMotion dur="3s" repeatCount="indefinite">
        <mpath xlink:href="#pathCircle" />
      </animateMotion>
    </circle>
  </g>
  <g transform="rotate(240 160 160)
                translate(0 106.72)
                scale(1 0.333)">
    <circle r="2" fill="#EEE" stroke-width="0" transform="scale(1 3)">
      <animateMotion dur="5s" repeatCount="indefinite">
        <mpath xlink:href="#pathCircle" />
      </animateMotion>
    </circle>
  </g>
  <g transform="rotate(270 160 160)
                translate(0 106.72)
                scale(1 0.333)">
    <circle r="2" fill="#EEE" stroke-width="0" transform="scale(1 3)">
      <animateMotion dur="2s" repeatCount="indefinite">
        <mpath xlink:href="#pathCircle" />
      </animateMotion>
    </circle>
  </g>
  <g transform="rotate(300 160 160)
                translate(0 106.72)
                scale(1 0.333)">
    <circle r="2" fill="#EEE" stroke-width="0" transform="scale(1 3)">
      <animateMotion dur="3s" repeatCount="indefinite">
        <mpath xlink:href="#pathCircle" />
      </animateMotion>
    </circle>
  </g>
  <g transform="rotate(330 160 160)
                translate(0 106.72)
                scale(1 0.333)">
    <circle r="2" fill="#EEE" stroke-width="0" transform="scale(1 3)">
      <animateMotion dur="5s" repeatCount="indefinite">
        <mpath xlink:href="#pathCircle" />
      </animateMotion>
    </circle>
  </g>
</svg>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
}

View Compiled

Run Pen

This Pen is owned by 谭戬 on CodePen.

See more by @tajoy on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.