JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/2.0.2/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/2.0.2/velocity.ui.min.js"></script>
<div class="data--flow--2">


  <div class="ball--2"></div>
  <div class="data--flow--sub">

  </div>
</div>

SCSS

.data--flow--2 {
  position: absolute;
  width: 103px;
  height: 176px;
  border-top: 10px solid #2F94BB;
  border-left: 10px solid #2F94BB;
  .ball--2 {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    background-color: #FFFFFF;
    bottom: 5px;
    left: -10px;
  }
  .data--flow--sub {
    float: right;
    background-color: #2F94BB;
    width: 10px;
    height: 10px;
  }
}

JavaScript

var ball_2_BlinkDuration = 100,
  ball_2_BlinkDelay = 50,
  ball_2_BlinkInterval = null,
  ball_2_BlinkIntervalDelay = 500,
  $ball_2 = $('.ball--2');

var delay = 15 * (ball_2_BlinkDuration + ball_2_BlinkDelay) + ball_2_BlinkIntervalDelay; //calculating delay
console.log("last animation " + delay);
window.clearInterval(ball_2_BlinkInterval);


function dataFlowing__2() {
  $ball_2.velocity({
    bottom: "100%"
  }, {
    complete: function() {
      $(this).velocity({
        left: "90%"
      }, {
        complete: function() {
          $(this).velocity({
            top: "3%"
          }, {
            complete: function() {
              $(this).removeAttr('style');

            }
          });
        }
      });
    }
  });
}

var ball_2_BlinkInterval = window.setInterval(function() {
  dataFlowing__2();
}, delay);