The Progressmeter component is designed to simply display the current % complete for a process.

The autodisable feature can be used on Button component. It used to disable a button automatically.

<zk>
	<window id="mainWin" border="normal" width="100%">
		<zscript><![CDATA[
			Integer allstep = 4;
			Integer step = 1;
			void reset() {
				step1.setDisabled(false);
				step2.setDisabled(false);
				step3.setDisabled(false);
				step4.setDisabled(false);
				go(0, "");
			}
			void go(Integer s, String label) {
				Integer percent = s * 100 / allstep;
				if("".equals(label)) {
					progress_label.setValue("Join ZK");
				} else  {
					progress_label.setValue(percent + " % - " + "Join ZK - " + label);
				}
				curr_met.setValue(percent);
			}
		]]></zscript>
		<caption>
			<hlayout valign="middle">
				<progressmeter id="curr_met" value="0" width="300px" />
				<label id="progress_label" value="Join ZK"></label>
			</hlayout>
		</caption>
		<hlayout sclass="z-valign-middle">
			<button id="step1" label="Register" width="100px" height="80px" onClick='go(1,self.label)' autodisable="+self" />
			<div hflex="true"><image src="/widgets/miscellaneous/progress_meter/img/arrow.png" /></div>
			<button id="step2" label="Login" width="100px" height="80px" onClick='go(2,self.label)' autodisable="+step1,+self" />
			<div hflex="true"><image src="/widgets/miscellaneous/progress_meter/img/arrow.png" /></div>
			<button id="step3" label="Download" width="100px" height="80px" onClick="go(3,self.label)" autodisable="+step2,+step1,+self" />
			<div hflex="true"><image src="/widgets/miscellaneous/progress_meter/img/arrow.png" /></div>
			<button id="step4" label="Enjoy" width="100px" height="80px" onClick='go(4,self.label+"!!")' autodisable="+step3,+step2,+step1,+self" />
		</hlayout>
		<separator height="20px"></separator>
		<button id="reset" label="Clear" width="100%" onClick="reset()" />
	</window>
	<style>
		.z-valign-middle div{
			text-align: center;
		}
	</style>
</zk>