<link rel="stylesheet" href="https://ux.verint.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">

<style>
.progress, .progress-bar {
	top: 0;
	left: 0;
	z-index: 22222;
	width: 100%;
	height: 4px;
}

.intermediate-progress-bar {
	display: none;
	top: 0;
	left: 0;
	z-index: 22222;
	width: 100%;
	height: 4px;
}

.intermediate-progress-bar-animation {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	background-color: #007aff;
	transition: width 0.6s ease;
	width: 20%;
	animation: mymove 1s infinite;
}

.intermediate-progress-bar.animate {
	display: flex;
}

@keyframes mymove {
	from {
		margin-left: 0%;
	}
	
	to {
		margin-left: 100%;
	}
}
</style>

<div class="card">
			<div class="card-header">Radio Button <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Determinate</label>
						<div class="col-lg-4">
							<div class="progress">
							  <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Indeterminate</label>
						<div class="col-lg-4">
							<div class="intermediate-progress-bar animate">
								<div class="intermediate-progress-bar-animation" role="progressbar" aria-valuenow="intermediate" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="intermediate-progress-bar animate">
	<div class="intermediate-progress-bar-animation" role="progressbar" aria-valuenow="intermediate" aria-valuemin="0" aria-valuemax="100"></div>
</div></script></code></pre>
						</div>
					</div>
					<script>
						var currentVal = 0;

						function simulateProgress() {
						  setTimeout(function() {
							  $(".progress .progress-bar").width(currentVal+"%");
							  $(".progress .progress-bar").attr("aria-valuenow", currentVal);
							  currentVal += 1;
							  if (currentVal <= 100) {
								  simulateProgress();
							  }
						  }, 100)
						}

						simulateProgress();  
					</script>
				</form>
			</div>
		</div>