ProgressBar in Ext JS:

You can display progress bar in ExtJS 4 using Ext.ProgressBar class. It supports two different modes: Manual and Automatic.

In the manual mode, you are responsible for showing, updating (via updateProgress) and clearing the progress bar as needed from your own code. This method is most appropriate when you want to show progress throughout the operation that has predictable points of interest at which you can update the control.

Following is an example of manual progress bar using updateProgress method:

for(var i = 0; i < 11; i ++ ){
        progBar.updateProgress((i * 0.1), 'updating', 'saving..');
        //write code which takes times to execute in each iteration
    }
progBar.updateText('Saved Successfully!');

Automatic progress bar using wait method:

progBar.wait({
    duration : 10000,
    increment : 12,
    text : 'Saving...',
    scope : this,
    fn : function(){
        progBar.updateText('Saved Successfully!');
    }
});

You can also use Ext.MessageBox to show automatic progress bar as below:

Ext.MessageBox.show({
        msg : 'Saving changes, please wait...',
        progressText : 'Saving...',
        width : 300,
        wait : true,
        waitConfig : 
        {
            duration : 10000,
            increment : 15,
            text : 'Saving...',
            scope : this,
            fn : function(){
                Ext.MessageBox.hide();
                Ext.Msg.alert('Status', 'Saved successfully!');
            }
        }
    });

Try it on https://fiddle.sencha.com/#fiddle/3ku

Please visit Sencha documentation for more information on progress bar.