Content Comparison

<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/bootstrap-tooltip-custom-class.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">



<div class="card">
    <div class="card-header">Linear Progress Indicator <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" 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" 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(100 - currentVal+"%");
							  $(".progress .progress-bar").attr("aria-valuenow", currentVal);
							  currentVal += 1;
							  if (currentVal <= 100) {
								  simulateProgress();
							  }
						  }, 200)
						}

						simulateProgress();  
					</script>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Circular Progress Indicator</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="spinner" role="status">
							  <span class="sr-only">Loading...</span>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="spinner" role="status">
	<span class="sr-only">Loading...</span>
</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="indeterminate-spinner" role="status">
							  <span class="sr-only">Loading...</span>
							</div>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><div class="indeterminate-spinner" role="status">
	<span class="sr-only">Loading...</span>
</div></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>