JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
A. Without blink problem:
<div class="parrent progress progress-striped dropdown-toggle">
   <div class="child empty progress-bar progress-bar-danger pull-right" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<hr>
B. With blink Problem:
<div class="parrent progress progress-striped dropdown-toggle">
   <div class="child empty progress-bar progress-bar-danger pull-left" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"></div>
</div>

CSS

.parrent{
  border-radius:10px;
      -webkit-transform: translateZ(0);
      width:100px;
      margin:0 auto;
}
.child{
  width: 80%;
  transition: all 2s ease;
  opacity: .3;
  /* border-radius: 21px 0 0 21px; */
}
.empty {
    -webkit-animation-name: hx-empty-battery-anim;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
    -webkit-animation-duration: 1.7s;
}

@-webkit-keyframes hx-empty-battery-anim {  
  0% { opacity: 1; }
  50% { opacity: .3; }
  100% { opacity: 1; }
}