JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="parent">
  <div class="verify-email">
  <div class="icons-container">
    <span class="icon">
    <i class="fa fa-circle" aria-hidden="true"></i>
  </span>
    <span class="icon">
    <i class="fa fa-circle" aria-hidden="true"></i>
  </span>
    <span class="icon">
    <i class="fa fa-circle" aria-hidden="true"></i>
  </span>
  </div>
  <p>
    Please Wait, we are verifying your Account
  </p>
</div>

</div>

CSS

.parent {
  display: table
}
.verify-email {
  height: 200px;
  width: 500px;
  border: 1px solid black;

  display: table-cell;
  vertical-align: middle;
}

.icons-container {
  text-align: center;
}

.icon.selected {
  color: red;
}
p{
  text-align: center;
}

JavaScript

let count = 0;
let $icons = $('.icon');
setInterval(function() {
  $icons.removeClass('selected');
  $icons.eq(count).addClass('selected');
  count++;
  if (count == 3) {
    count = 0;
  }
}, 500)