JSFiddle - React, Tailwind, and code Playground

by timkl

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<h2>Value 1</h2>

<div id="value1-bar" class="bar">
    <div class="usage-bar-empty"></div><!-- /usage-bar-empty -->
    <div class="usage-bar-fill"></div><!-- /usage-bar-fill -->
</div><!-- /value1-bar -->

<h2>Value 2</h2>

<div id="value2-bar" class="bar">
    <div class="usage-bar-empty"></div><!-- /usage-bar-empty -->
    <div class="usage-bar-fill"></div><!-- /usage-bar-fill -->
</div><!-- /value2-bar -->

CSS

.usage-bar-empty {
    position: absolute;
    width: 200px;
    height: 20px;
    border: 1px solid black;
    }

.usage-bar-fill {
    position: absolute;
    width: 0px;
    height: 20px;
    background: green;
    border: 1px solid black;
    }

.bar {
    position: relative;
    height: 40px;
}

JavaScript

var data = {
    json: $.toJSON({
        Value1: '90',
        Value2: '120'
    }),
    delay: 1
};

$.ajax({

    url: "/echo/json/",
    type: "POST",
    data: data,
    success: function(data){

    
    $("#value1-bar .usage-bar-fill").animate({
        width: data.Value1
        }, 2500, function() {
        // Animation complete.
    });

    $("#value2-bar .usage-bar-fill").animate({
        width: data.Value2
        }, 2500, function() {
        // Animation complete.
    });

    },
    dataType: "json"
});