JSFiddle - React, Tailwind, and code Playground

by GunWanderer

HTML

<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="progress">
	<div id="myProgressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
		<span id="currentProgress">$30</span>
	</div>

</div>
<h3 id="goal" class="goal">Goal:$45</h3>

CSS

body {
padding: 10px;}

.progress-bar span {color:#fff;}

@-webkit-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-moz-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-o-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }


.progress-bar {
height: 50px;
border-radius: 10px;
float: left;
width: 10%;
}

JavaScript

$(document).ready(function() {
	//Modify your numbers here:
	var goal = 45;
	var currentProgress = 40;
	
	//Script:
	var percentage = currentProgress / goal * 100;
	$("#myProgressBar").css("width", percentage + '%');
	var status = '$' + currentProgress + ' (' + Math.round(percentage) + '%)';
	$("#currentProgress").html(status);
	$("#goal").html('Goal: $' + goal);
});