JSFiddle - React, Tailwind, and code Playground

by Ramkumar Pillai

HTML

<div class="circular">
    <div class="clabel"><span id="rtActiveUsrs">0</span></div>
    <div id="output">
         <ul>
             <li>testing</li>
        </ul>
    </div>
</div>

CSS

div {
    -webkit-transition: all 0.3s ease-in-out 0s; /* Chrome, Safari 3.1+ */
    -moz-transition: all 0.3s ease-in-out 0s; /* Firefox 3.5+ */
    -ms-transition: all 0.3s ease-in-out 0s; /* IE 9 */
    -o-transition: all 0.3s ease-in-out 0s; /* Opera 10.50-12.00 */
    transition: all 0.3s ease-in-out 0s; /* Firefox 16+, IE 10+, Opera 12.10+ */;
}
 
.circular {
    position: relative;
    width: 200px;
    height: 200px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border-color: #000;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    -webkit-box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    -webkit-transform: scale(1) perspective(200);
    -moz-transform: scale(1) perspective(200);
    -ms-transform: scale(1) perspective(200);
    -o-transform: scale(1) perspective(200);
    transform: scale(1) perspective(200);
}
 
.clabel {
    font-weight: 100;
    font-size: 30px;
    line-height: 200px;
    color: #10719E;
    font-family: Century Gothic, sans-serif;
    text-shadow: 0 0 3px rgb(160, 160, 160);
}
 
.circular:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

JavaScript

//https://equinixportal.appspot.com/query?id=ag9zfmVxdWluaXhwb3J0YWxyFQsSCEFwaVF1ZXJ5GICAgICAuYQKDA

function repeatMe(){
 $.ajax({
  url: 'http://localhost:9000/portal360/odsSummaryStatistics',
  dataType: 'json',
  cache: true,
  timeout: 30000,
  success: function(data) {
       /* $('#rtActiveUsrs').empty();
        $.each(data, function(i,v){ 
            $('#rtActiveUsrs').append(v);
        });*/
       $('#output ul').empty();
       $('#output ul').append('<li>'+ data[0].totalOrders +'</li>');
       $('#output ul').append('<li>'+ data[0].totalBillables +'</li>');
       $('#output ul').append('<li>'+ data[0].totalNonBillables +'</li>');
      
    },
    error: function(){
       
    }
 });
}

setInterval(repeatMe, 5000);