JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="&quot;http://bootswatch.com/darkly/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="bs-component">
    <div class="progress progress-striped active" style="margin-bottom: 0px;">
        <div class="progress-bar progress-bar-danger" style="width: 100%">
        </div>
    </div>
    <div style="text-align: center;font-size: 80px;color: #f00;">
        <span class="glow" id="glow">WARNING!</span>
    </div>
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-danger" style="width: 100%"></div>
    </div>
</div>

CSS

div.progress {
        height: 50px;
        border-radius: 100;
    }
    
    div.progress.active .progress-bar {
        -webkit-animation: progress-bar-stripes 500ms linear infinite;
        -o-animation: progress-bar-stripes 500ms linear infinite;
        animation: progress-bar-stripes 500ms linear infinite;
        background-size: 60px 60px;
    }

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 60px 0;
  }
  to {
    background-position: 0 0;
  }
}
@-o-keyframes progress-bar-stripes {
  from {
    background-position: 60px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 60px 0;
  }
  to {
    background-position: 0 0;
  }
}