Loading

This is the Default mold for Loading.

Source

The CSS source for Loading from GitHub

Structure

Loading

Processing

Events

CSS\Action	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
Naming:
Supported:

Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS background-position

CSS Specification

Class Name	Description	Default Values
.z-loading	Background and border	background-color: #6eadff; cursor: wait; white-space: nowrap; padding:3px; border: 1px solid #83B5F7;
.z-loading-indicator	Inner part and text	background-color: #FFFFFF; color: #102B6D; border:1px solid #83B5F7; white-space: nowrap; padding:6px;
.z-loading-icon	The loading icon	background: transparent no-repeat center; background-image: url(${c:encodeURL('~./zk/img/progress2.gif')}); height: 16px; width: 16px;
.z-loading	Font size of the content	font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyT};

Sample

<syntax lang="xml" > <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?> <zk> <style> .z-loading { background-color:#808080; border:1px outset #A0A0A0; font-weight: bold; padding:2px; } .z-loading-indicator { color: gray; border:0 none; } .z-loading-icon { background-image: url(${c:encodeURL('~./zk/img/progress3.gif')}); } </style> </zk> </syntax>

Test Method

Loading

<syntax lang="xml"> <zk> <button label="showBusy"> <attribute name="onClick"><![CDATA[ Clients.showBusy("some message...");

       ]]></attribute>

</button> </zk> </syntax>

Processing

<syntax lang="xml"> <zk>

 <button label="Test Progress" onClick="org.zkoss.lang.Threads.sleep(10000)"/>

</zk> </syntax>