Code Snippets

This sample shows how to change the loading icon layout behavior, such as image,location and background by using the theme editor (available from from v6.4 and above).

To change the loading icon just open the theme,navigate to the "Loading" node on the skins three. Select the "images" option on teh Resources panel and override the Loading.gif by right clicking it and selecting the Override menu item. After that you just need to change the Theme.LoadingSkin.Loading.gif to the new icon you want to display.

To change the icon location and background, select the "Style Sheets" option on the Resources panel, override the Loading.css file and edit the .Loading-AnimationBox session to reflect the layout you want. On the sample below the session was changed so that the icon is centered and the background is grayed out in the same manner as it happens when a modal form is displayed:

.Loading-AnimationBox
{
 [Skin.LoadingAnimationStyle];
}

to

.Loading-AnimationBox
{
 BACKGROUND-IMAGE: url(Resources.Gizmox.WebGUI.Forms.Skins.LoadingSkin.Loading.gif.wgx);
 BACKGROUND-REPEAT: no-repeat;
 BACKGROUND-POSITION: center center;
 FILTER: alpha(opacity=50); BACKGROUND-COLOR: black
}

Download Code

Note: Codes are submitted as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Terms of Agreement:
By using this code, you agree to the following terms...

1. You may use this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
2. You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.
3. You may link to this code from another website, but ONLY if it is not wrapped in a frame.
4. You will abide by any additional copyright restrictions which the author may have placed in the code or code's description.