Generated by SassMeister.com.

SassMeister-input-HTML.jade

.tvt-desktop-infographic-block.tvt-desktop-infographic-arrow.display-flex.flex-rows.flex-content-center
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-dot
  .tvt-desktop-infographic-arrow-head

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----



@keyframes blink {
    0% {
        background: #c5c6c6;
    }
    100% {
        background: #6aade4;
    }
}

.tvt-desktop-infographic-arrow-dot {
    width:7px;
    height:7px;
    border-radius:7px;
    background: #c5c6c6;
    margin-right:6px;
    position:relative;
    top:15px;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-duration: .5s;
    animation-direction: alternate-reverse;
    display:inline-block;
}

@for $i from 1 through 15 {
  .tvt-desktop-infographic-arrow-dot:nth-child(#{$i}) {
    animation-delay:$i * 0.05s;
}
}

SassMeister-output.css

@keyframes blink {
  0% {
    background: #c5c6c6;
  }
  100% {
    background: #6aade4;
  }
}

.tvt-desktop-infographic-arrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 7px;
  background: #c5c6c6;
  margin-right: 6px;
  position: relative;
  top: 15px;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-duration: .5s;
  animation-direction: alternate-reverse;
  display: inline-block;
}

.tvt-desktop-infographic-arrow-dot:nth-child(1) {
  animation-delay: 0.05s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(2) {
  animation-delay: 0.1s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(3) {
  animation-delay: 0.15s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(4) {
  animation-delay: 0.2s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(5) {
  animation-delay: 0.25s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(6) {
  animation-delay: 0.3s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(7) {
  animation-delay: 0.35s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(8) {
  animation-delay: 0.4s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(9) {
  animation-delay: 0.45s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(10) {
  animation-delay: 0.5s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(11) {
  animation-delay: 0.55s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(12) {
  animation-delay: 0.6s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(13) {
  animation-delay: 0.65s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(14) {
  animation-delay: 0.7s;
}

.tvt-desktop-infographic-arrow-dot:nth-child(15) {
  animation-delay: 0.75s;
}

SassMeister-rendered.html

<div class="tvt-desktop-infographic-block tvt-desktop-infographic-arrow display-flex flex-rows flex-content-center">
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-dot"></div>
  <div class="tvt-desktop-infographic-arrow-head"></div>
</div>