rainbow loader

index.html

<svg xmlns="http://www.w3.org/2000/svg" id="svg8" viewBox="0 0 35 40" >
  <g transform="translate(0 -.1)" id="layer1" fill-rule="evenodd" stroke-width=".3">
    <path d="M17.3.1v10l8.7-5z" id="dreieck01" fill="#b10000"/>
    <path d="M26 15.1v-10l-8.7 5z" id="dreieck02" fill="#e55e1c"/>
    <path d="M26 5.1v10l8.6-5z" id="dreieck03" fill="#ffc452"/>
    <path d="M34.6 20.1v-10l-8.6 5z" id="dreieck04" fill="#acae00"/>
    <path d="M26 15.1v10l8.6-5z" id="dreieck05" fill="#a8ff00"/>
    <path d="M34.6 30.1v-10l-8.6 5z" id="dreieck06" fill="#54ff00"/>
    <path d="M26 25.1v10l8.6-5z" id="dreieck07" fill="#0f0"/>
    <path d="M26 35.1v-10l-8.7 5z" id="dreieck08" fill="#00ff54"/>
    <path d="M17.3 30.1v10l8.7-5z" id="dreieck09" fill="#00ffa8"/>
    <path d="M17.3 40.1v-10l-8.7 5z" id="dreieck10" fill="#00fcff"/>
    <path d="M8.6 25.1v10l8.7-5z" id="dreieck11" fill="#00a8ff"/>
    <path d="M8.6 35.1v-10l-8.6 5z" id="dreieck12" fill="#0054ff"/>
    <path d="M0 20.1v10l8.6-5z" id="dreieck13" fill="#00f"/>
    <path d="M8.6 25.1v-10l-8.6 5z" id="dreieck14" fill="#5400ff"/>
    <path d="M0 10.1v10l8.6-5z" id="dreieck15" fill="#a800ff"/>
    <path d="M8.6 15.1v-10l-8.6 5z" id="dreieck16" fill="#fc00ff"/>
    <path d="M8.6 5.1v10l8.7-5z" id="dreieck17" fill="#ff00ae"/>
    <path d="M17.3 10.1V.1l-8.7 5z" id="dreieck18" fill="#ff005a"/>
  </g>
</svg>
<div class="dwf">
  <a class="btn" href="https://codepen.io/uchardon/">done with fun - @uchardon &copy; 2019</a></div>
<div class="share">
  <a target="_blank" href="https://twitter.com/intent/tweet?text=Atom%20SVG%20stroke%20animation%20with%20no%20JS&url=https://codepen.io/uchardon/pen/NORoXJ&via=CodePen">
<svg class="twitter" viewBox="0 0 612 612" >
  <path class="ani" d="M 612 116 c -23 10 -47 17 -72 20 26 -15 46 -40 55 -69 -24 14 -51 24 -80 30 a 125 125 0 0 0 -217 86 c 0 10 1 19 3 29 -104 -6 -196 -56 -258 -132 a 125 125 0 0 0 39 168 c -21 -1 -40 -6 -57 -16 v 2 c0 61 43 111 100 123 a127 127 0 0 1 -56 2 c 16 50 62 86 117 87 A 252 252 0 0 1 0 498 a 355 355 0 0 0 550 -301 l -1 -16 c 25 -17 46 -40 63 -65 z"  />
  <path d="M 612 116 c -23 10 -47 17 -72 20 26 -15 46 -40 55 -69 -24 14 -51 24 -80 30 a 125 125 0 0 0 -217 86 c 0 10 1 19 3 29 -104 -6 -196 -56 -258 -132 a 125 125 0 0 0 39 168 c -21 -1 -40 -6 -57 -16 v 2 c0 61 43 111 100 123 a127 127 0 0 1 -56 2 c 16 50 62 86 117 87 A 252 252 0 0 1 0 498 a 355 355 0 0 0 550 -301 l -1 -16 c 25 -17 46 -40 63 -65 z"  />
</svg>
    </a>
</div>

rainbow-loader.markdown

rainbow loader

A Pen by Uwe Chardon on CodePen.

License.

script.babel

console.clear();

style.less

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

svg {
  max-height: 90vh;
  max-width: 90vw;
}
path {
  animation: blendout 5400ms ease infinite ;
  transform-box: fill-box;
}
@keyframes blendout {
  0% { opacity: 1; transform: scale(1); }
  20% { opacity: 0; transform: scale(.8); }
  30% { opacity: 0; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
path:nth-child(2) {
  animation-delay: 300ms;
}
path:nth-child(3) {
  animation-delay: 600ms;
}
path:nth-child(4) {
  animation-delay: 900ms;
}
path:nth-child(5) {
  animation-delay: 1200ms;
}
path:nth-child(6) {
  animation-delay: 1500ms;
}
path:nth-child(7) {
  animation-delay: 1800ms;
}
path:nth-child(8) {
  animation-delay: 2100ms;
}
path:nth-child(9) {
  animation-delay: 2400ms;
}
path:nth-child(10) {
  animation-delay: 2700ms;
}
path:nth-child(11) {
  animation-delay: 3000ms;
}
path:nth-child(12) {
  animation-delay: 3300ms;
}
path:nth-child(13) {
  animation-delay: 3600ms;
}
path:nth-child(14) {
  animation-delay: 3900ms;
}
path:nth-child(15) {
  animation-delay: 4100ms;
}
path:nth-child(16) {
  animation-delay: 4400ms;
}
path:nth-child(17) {
  animation-delay: 4700ms;
}
path:nth-child(18) {
  animation-delay: 5000ms;
}

html { 
  height: 100%; 
  background: #1A2A3A;  
  background: #000;  
  color: #FFF; 
  scroll-behavior: smooth;
}
body {
  font-family: Roboto, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

*,
*:before,
*:after {
  position: relative;
  box-sizing: border-box;
}



.dwf, .share {
  position:fixed;
  bottom:4px;
  right:10px;
  background-color:#0003;
  padding:3px;
  border-radius:3px;
  .btn {
    color:#fff;
    text-decoration:none
  }
}
.share {
  right:auto;
  left:10px;
  border-radius:50%;
  padding:5px;
  .twitter {
    width: 20px;
    fill:#fff;
    stroke:none;
    overflow:visible;
  }
}