How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

Loader

A loader is used when some action is waiting to complete e.g. an ajax request.

Show a loading mask on an element.


        

Some text.

Some text.

Some text.


    // Show loader
    $('#demo1').load();

    // Show dark loader
    $('#demo1').load({
    	msg: 'Loading...',
    	color: 'dark'
    });

    // Customize icon
    $('#demo1').load({
        icon: '<i class="fa fa-circle-o-notch fa-spin"></i>',
        msg: 'Loading...'
    });

    // Remove Loader
    $('#demo1').unLoad();

Global loader

A global loader is a message pop-up at the center of the page.

      

    // Show Loader
    Z.load({
        msg: 'Loading...'
    });

    // Customize icon
    Z.load({
        icon: '<i class="fa fa-circle-o-notch fa-spin"></i>',
        msg: 'Loading...'
    });

    // Remove Loader
    Z.unLoad();