JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<svg class="loading-circles" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 50">

  <circle class="loading-circle-1" cx="25" cy="25" r="25"/>

  <circle class="loading-circle-2" cx="95" cy="25" r="25" />

  <circle class="loading-circle-3" cx="165" cy="25" r="25" />

</svg>

CSS

@-webkit-keyframes loading-circles-jump {
  0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
  33% { -webkit-transform: translateY(-12px); transform: translateY(-12px); opacity: .4;}
  100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
} 

@keyframes loading-circles-jump {
  0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
  33% { -webkit-transform: translateY(-12px); transform: translateY(-12px); opacity: .4;}
  100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
} 

.loading-circles {
    height: 10px;
    width: 25px;
}

.loading-circles circle {
    fill: @UserImgBackgroundColor;
}

.loading-circles .loading-circle-1 {
    -webkit-animation: loading-circles-jump 1s ease infinite;
            animation: loading-circles-jump 1s ease infinite;
}

.loading-circles .loading-circle-2 {
    -webkit-animation: loading-circles-jump 1s .3s  ease infinite;
            animation: loading-circles-jump 1s .3s  ease infinite;
}

 .loading-circles .loading-circle-3 {
    -webkit-animation: loading-circles-jump 1s .6s  ease infinite;
            animation: loading-circles-jump 1s .6s  ease infinite;
}