<!-- html -->
<div class="serviceFlexBox">
	<p>
		Donation
	</p>
	<p>
		90%
	</p>
</div>
<div class="progress-container">
	  <div class="progress-bar"></div>
</div>
<div class="serviceFlexBox">
	<p>
		Raised: $9,000
	</p>
	<p>
		Goal: $10,000
	</p>
</div>

<!-- css -->
.progress-container {
	width: 100%;
	background-color: #C7E7DF;
	border-radius: 20px;
  }
  
  .progress-bar {
	/* width: 90%; */
	height: 10px;
	background-color: #0267B6;
	text-align: center;
	line-height: 30px;
	color: white;
	font-size: 0;
	border-radius: 10px;
  }

  <!-- js -->
  jQuery(document).ready(function() {
	var bars = document.getElementsByClassName("progress-bar");
	var width = 0;
	var id = setInterval(frame, 10);
  
	function frame() {
	  if (width >= 90) {
		clearInterval(id);
	  } else {
		width++;
		for (var i = 0; i < bars.length; i++) {
		  bars[i].style.width = width + '%';
		  bars[i].innerHTML = width * 1 + '%';
		}
	  }
	}
  });