SVG CSS Loading Icons (dots)

index.html

<svg class="bounce" role="status" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100" aria-labelledby="title desc">
  <!-- accessible descriptors   -->
  <title id="title">Loading</title>
  <desc id="desc"> fetching content, please wait.</desc>
  <circle r="20%" cx="15%" cy="50%" color="#000"/>
  <circle r="20%" cx="50%" cy="50%" color="#000"/>
  <circle r="20%" cx="85%" cy="50%" color="#000"/>
</svg>

<svg class="fade-out" role="status" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
  <circle r="20%" cx="15%" cy="50%" color="#000"/>
  <circle r="20%" cx="50%" cy="50%" color="#000"/>
  <circle r="20%" cx="85%" cy="50%" color="#000"/>
</svg>

<svg class="fade-in" role="status" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
  <circle r="20%" cx="15%" cy="50%" color="#000"/>
  <circle r="20%" cx="50%" cy="50%" color="#000"/>
  <circle r="20%" cx="85%" cy="50%" color="#000"/>
</svg>

<svg class="fade-out-half" role="status" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
  <circle r="20%" cx="15%" cy="50%" color="#000"/>
  <circle r="20%" cx="50%" cy="50%" color="#000"/>
  <circle r="20%" cx="85%" cy="50%" color="#000"/>
</svg>

<svg class="fade-in-half" role="status" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
  <circle r="20%" cx="15%" cy="50%" color="#000"/>
  <circle r="20%" cx="50%" cy="50%" color="#000"/>
  <circle r="20%" cx="85%" cy="50%" color="#000"/>
</svg>

style.css

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-wrap: wrap;
  background: #2c2725;
}

svg {
  pointer-events: none;
  width: 100px;
  display: block;
  margin: 0 auto;
  overflow: visible;
  padding: 15px;
  max-width: 100%;
}

svg circle {
  transform-origin: center;
  fill: #c0ff;
  transition: ease;
  animation-timing-function: ease-in-out !important;
}

/* bouncy  */

svg.bounce circle:nth-child(3) {
  animation: fadeOutIn-bounce 0.9s -0.3s infinite;
}

svg.bounce circle:nth-child(4) {
  animation: fadeOutIn-bounce 0.9s -1.3s infinite;
}

svg.bounce circle:nth-child(5) {
  animation: fadeOutIn-bounce 0.9s -2.3s infinite;
}

/* fade out */

svg.fade-out circle:nth-child(1) {
  animation: fadeIn 0.9s -2.3s infinite reverse;
}

svg.fade-out circle:nth-child(2) {
  animation: fadeIn 0.9s -1.3s infinite reverse;
}

svg.fade-out circle:nth-child(3) {
  animation: fadeIn 0.9s -0.3s infinite reverse;
}

/* fade in */

svg.fade-in circle:nth-child(1) {
  animation: fadeIn 0.9s -2.3s infinite;
}

svg.fade-in circle:nth-child(2) {
  animation: fadeIn 0.9s -1.3s infinite;
}

svg.fade-in circle:nth-child(3) {
  animation: fadeIn 0.9s -0.3s infinite;
}

/* fade out half */

svg.fade-out-half circle:nth-child(1) {
  animation: fadeInHalf 0.9s -2.3s infinite reverse;
}

svg.fade-out-half circle:nth-child(2) {
  animation: fadeInHalf 0.9s -1.3s infinite reverse;
}

svg.fade-out-half circle:nth-child(3) {
  animation: fadeInHalf 0.9s -0.3s infinite reverse;
}

/* fade in half */

svg.fade-in-half circle:nth-child(1) {
  animation: fadeInHalf 0.9s -2.3s infinite;
}

svg.fade-in-half circle:nth-child(2) {
  animation: fadeInHalf 0.9s -1.3s infinite;
}

svg.fade-in-half circle:nth-child(3) {
  animation: fadeInHalf 0.9s -0.3s infinite;
}

/* keyframes */

@keyframes fadeOutIn-bounce {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
    transform: scale(0.9) translateY(50%);
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInHalf {
  from {
    opacity: 0.5;
  }
  to: {
    opacity: 1;
  }
}

svg-css-loading-icons-dots.markdown

SVG CSS Loading Icons (dots)

A Pen by IpsumLorem16 on CodePen.

License.