Progress Bar

A progress control is a state indicator. It can be used to indicate content loading or updating. While the tab is visually disabled and not accessible for user actions the progress is enabled.

This functionality will not start automatically when some content is loaded into a tab, it needs to be triggered by calling the appropriate API method.

Here is the code for a tab's progress control:

// turning progress on
myTabbar.tabs(id).progressOn();
 
// turning progress off
myTabbar.tabs(id).progressOff();

Related sample: Cell progress

In practical scenario, you can place the progressOn() call before loading data in some component, and progressOff() in data loading callback, for example:

var myTabbar;
var myGrid;
 
// initialize layout and attach grid
function initControls() {
    myTabbar = new dhtmlXTabBar({
    parent:"tabbarObj",
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"}
      ]
    });
    myGrid = myTabbar.tabs("a1").attachGrid();
    loadGridData(true);
}
 
// load/reload grid data
function loadGridData(firstLoad) {
    myTabbar.tabs("a1").progressOn();
    if (firstLoad == true) {
        myGrid.load("server.php", doOnGridLoaded);
    } else {
        myGrid.updateFromXML("server.php", true, false, doOnGridLoaded);
    }
}
 
// grid dataload callback
function doOnGridLoaded() {
    myTabbar.tabs("a1").progressOff();
}

<body onload="initControls();">
    <div id="layoutObj" style="width: 600px; height: 400px;"></div>
    <input type="button" value="refresh grid" onclick="loadGridData();"></div>
</body>

Each time you will click the button, the loadGridData() method will be called and you will see the progress of loading over the cell with grid.