JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="hidden-data">
    <div data-info='[{"medium":"100","hight":"75","ultra":"50"}]'></div>
    <div data-info='[{"medium":"100","hight":"65","ultra":"45"}]'></div>
    <div data-info='[{"medium":"90","hight":"80","ultra":"70"}]'></div>
</div>

<br>
<br>

<div class="dropdown" id="dropDownControl">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-index="0">Action</a></li>
    <li><a href="#" data-index="1">Another action</a></li>
    <li><a href="#" data-index="2">Something else here</a></li>
  </ul>
</div>

<br>
<br>

<div class="visual-data">
    <div class="progress medium">
        <span class="progress-data">0%</span>
    </div>
    <div class="progress high">
        <span class="progress-data">0%</span>
    </div>
    <div class="progress ultra">
        <span class="progress-data">0%</span>
    </div>
</div>

SCSS

.hidden-data {
    display: none;
}

.visual-data {
    width: 400px;
    padding: 5px;
    background-color: #000;
}

.progress {
    width: 20%;
    height: 20px;
    background-color: #cdcdcd;
    margin-bottom: 5px;
    text-align: center;
    
    &:last-child {
        margin-bottom: 0;
    }
}

JavaScript

var visualData = $('.visual-data');
var allBars = $('.progress');
var medium  = $('.medium');
var high    = $('.high');
var ultra   = $('.ultra');

var animateInterval = 1000;

function progressBars(percent, element) {

    var id = setInterval(function() {
        
        var width = element.width() / visualData.width() * 100;

        width = Math.round(width);
        element.html(width + 1 + '%' + ', ' + (200/100*(width + 1)) + 'FPS');

      }, animateInterval/60);

    element
    	.stop(true, true)
        .animate({
            width: percent + "%"
        }, animateInterval, 'linear', function() {
            clearInterval(id);
        });
}

function hideProgressBars() {
    progressBars(0, allBars);
}

$('#dropDownControl .dropdown-menu a[data-index]').on('click', function(event) {
	
    event.preventDefault();
    
    hideProgressBars();

    var $self = $(this);
    
    $self
    	.parents('#dropDownControl')
        .find('.dropdown-toggle')
        .html($self.html() + ' <span class="caret"></span>');
    
    setTimeout(function() {

        var data = $('.hidden-data').find('div').eq($self.data('index')).data('info');

		progressBars(data[0].medium, medium);
        progressBars(data[0].hight, high);
        progressBars(data[0].ultra, ultra);

    }, animateInterval);
});