JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="tabs" >
<ul>
<li>
<a id="stores" href="#stores-content">
<p class="tablip">
Store
<img class="loading" src="http://jimpunk.net/Loading/wp-content/uploads/loading6.gif"/>
<span class="tab_count"/>
</p>
</a>
</li>
<li>
<a id="products" href="#products-content">
<p class="tablip">
Product
<img class="loading" src="http://jimpunk.net/Loading/wp-content/uploads/loading6.gif"/>
<span class="tab_count"/>
</p>
</a>
</li>
</ul>
<div id="stores-content"></div>
<div id="products-content"></div>
</div>
CSS
.tab_count {
diplay: none;
}
JavaScript
function loaditems() {
var url1 = '/store-url';
var url2 = '/products-url';
go_to_page(1, url1, "stores");
go_to_page(1, url2, "products");
}
function go_to_page(count, url, tab) {
// Simulate a loading of 2 seconds
setTimeout(function() {
// Write tab content
$('#' + tab + '-content').html('<span>Content of the ' + tab + ' tab which takes a while to load</span>');
// Hide loading image
$('#' + tab + ' .loading').hide();
// Add tab count
$('#' + tab + ' .tab_count').html(new Date().getTime()).show();
}, 2000);
}
$(function() {
$("#tabs").tabs();
loaditems();
});