JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box-container">
    <div class="ball1"></div>
    <span class="dollar">$</span>
<div class="ball"></div>
    
    <div class="box-text"><span id="badge">0</span></div><br />
    
    <div class="box-text-secondary">Some Text will go here.</div>

</di>

CSS

body {
	margin: 0;
	padding: 0;
	font: 12px normal Verdana, Arial, Helvetica, sans-serif;
	height: 100%;
}

#box-container { margin:20px; padding: 40px; background-color: #e8e8e8; width: 400px; height:100px; }

.box-text { margin-left:80px; margin-top:12px;}
#badge { font-size: 30px; color: #d76311; font-weight: bold;  }
#badge-support-text { font-size: 30px; color: #d76311; font-weight: bold; }
.box-text-secondary { margin-left:80px; width:200px;line-height:18px; color: #676767;}
.dollar { position:absolute; margin-top: 13px; margin-left:22px; font-size: 30px; color: #d76311; font-weight: bold; }


.container {width: 960px; margin: 0 auto; overflow: hidden;}
.content {width:800px; margin:0 auto; padding-top:50px;}
.contentBar {width:90px; margin:0 auto; padding-top:50px; padding-bottom:50px;}

/* STOP ANIMATION */

.stop {
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
}

/* Loading Circle */
.ball {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(215,99,17,0.9);

	border-top:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:90px;
    position:absolute;
	width:50px;
	height:50px;
	
	-moz-animation:spin 2s infinite linear;
	-webkit-animation:spin 2s infinite linear;
}

.ball1 {
	border:5px solid #ccc;

	border-radius:50px;
    position:absolute;
	width:50px;
	height:50px;
	
	
}



@-moz-keyframes spin {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(-360deg); }
}

/* Second Loadin Circle */

.circle {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-right:5px solid rgba(0,0,0,0);
	border-left:5px solid...

JavaScript

var millisecs = 10;
setInterval(function() {
    var $badge = $('#badge');
    
    var num = parseFloat($badge.text().replace(',', ''))+11.34;
    num = num.toFixed(2);
    
    var numString = num.toString().split('.');
 
    var dollars = numString[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    var cents = numString[1];
    
    var str = [dollars, cents].join('.');
    
    $badge.text( str );
}, millisecs);