Click here to Skip to main content
11,789,710 members (59,651 online)
Click here to Skip to main content

Customizable 'Loading' Control for Web Applications with Designer Support

, 7 Jan 2010 CPOL 44.2K 1.4K 100
Rate this:
Please Sign up or sign in to vote.
Just drag n drop of a control to show 'in process' indication in a Web application
Loading1_Customized_Display2.PNG Loading1_Customized_Display4.PNG Loading1_Customized_Display1.PNG Loading1_Customized_Display3.PNG



Whenever there is a 'Page Load', it's a good practice to show some indicator to the user about the progress. This gives a good feeling to the user interacting with the website. Traditionally, this is achieved writing JavaScript while the 'Page Loads' - but one need to write quite a few JavaScript lines again and again. Further, beginners who are not much aware of JavaScript might face a little difficulty in achieving it. Also, at times, possibility of syntactical error(s) is always there while writing the traditional code. So, a custom control with all the necessary features packed into one would always save us some time!

This is a fully customizable control that one needs to just drag and drop from the toolbox in order to use. It contains design time support, toolbox support and property browser support. One can also extend or limit the functionality based on the specific need.


While working on the last couple of projects, during the page loads we were asked to show a certain indicator or an informative message on the screen such that user experience is good. In order to achieve it, we used to follow the traditional method of putting JavaScript while page loads. Then, I thought of making a custom control that does the same thing for me, such that I don't need to replicate my scripts and write related code again and again for every page. Further, having customization and design time support would be a plus!

Using the Code

From a usage point of view, one just needs to drag and drop the control from the toolbox. User specific properties can be set either during design time or runtime. As such, by default, no code change or implementation is needed. A design time markup was added to the control for its design time appearance to make it visible and clear in the Webforms designer.

// Just drag and drop
<CustomControl:Loading ID="Loading1" runat="server" />
Loading5_HTML_Design_Support.PNG Loading4_Intellisense_Support.PNG

This is how the control is packaged. It's played upon with two events of the control:

// Custom Controls Constructor
// Binding of event handlers for processing
this.Init += new EventHandler(Loading_Init);
this.Load += new EventHandler(Loading_Load);

Once the page life cycle starts, 'Loading' control is formed in its Init event and shown to the user:

// JavaScript injected to use in order to show/hide the control
private string _UtilityScripts = "<SCRIPT LANGUAGE="'JavaScript'">
if(document.getElementById){var isLoaded = true;} 
function ShowObject(obj){if (isLoaded){ = 'block';}} 
function HideObject(obj){if (isLoaded){ = 'none';}}

private void Loading_Init(object sender, EventArgs e)
    WebControl tempWC = sender as WebControl;  
    //Loading control is displayed to the user while page loads
    tempWC.Page.Response.Write(_UtilityScripts + loadingDiv);

Font decorations and various other properties available are set for the control in the code behind before displaying it. When the page load finishes, the control is made hidden injecting the JavaScript during the execution of control's Load event.

// JavaScript injected to hide the control
private string _HideDiv = "<SCRIPT LANGUAGE="'JavaScript'"> 
var divLoadObject = document.getElementById(\"{0}\");
private void Loading_Load(object sender, EventArgs e)
     WebControl tempWC = sender as WebControl;
     tempWC.Page.Response.Write(string.Format(_HideDiv, "loadingScreen"));

Additional changes were made in the control to make it AJAX enabled. Thus, AJAX based websites too can use it without any hassle:

// Example codes embedded 
// For making the control AJAX enabled
 ScriptManager currPageScriptManager = 
	ScriptManager.GetCurrent(Page) as ScriptManager;
 if (currPageScriptManager != null)
        _IsAsyncPostBack = currPageScriptManager.IsInAsyncPostBack; 

// Controls property '_IsAsyncPostBack' is used to handle the Async scenarios

Customization was supported with various styles and alignments possible. Based on the property set by user (or default), control is loaded and displayed on the webpage. That was all that was needed to make it work. Now, come the various supports that made the control more user friendly and easy to use. To support these features, a designer class was added that overrides few methods and properties.

1. Designer Support: Visible interface in the design view of the webforms editor.


2. Property Browser Support in design view: Type associated with the property.


3. Toolbox Support: For dragging and dropping the control from the Visual Studio .NET toolbox.


Properties supported by the control:

  • LoadingText - Gets or Sets text to be displayed while control is displayed
  • LoadingImagePath - Gets or Sets image path of the image to be displayed in the control
  • HorizontalAlignment - Gets or Sets horizontal alignment of the control in the webpage
  • VerticalAlignment - Gets or Sets vertical alignment of the control in the webpage
  • TextVAlignment - Gets or Sets vertical alignment of the text in the control
  • TextLocation - Gets or Sets location of the text relative to image in the control

This concludes the making of the 'Loading' custom control. One can customize what text to show, what image to use, apply font style to the text and display the control on a webpage based on various horizontal/vertical alignments.

Initially I made it in VS2008, but thinking about users who would like to use it in VS2005 Web projects, I ported it in VS2005. One can upgrade the same into VS2008 successfully without any error.

Points of Interest

This was a different experience developing - I specifically learnt about the design time support, and exposing selected control property in the property browser window.


  • 7th January, 2010: Initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sandeep Mewara
Software Developer (Senior)
India India
Current location: Bangalore, India.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
csharpbd19-Nov-12 16:26
membercsharpbd19-Nov-12 16:26 
GeneralMy vote of 5 Pin
Savalia Manoj M18-Nov-12 16:48
memberSavalia Manoj M18-Nov-12 16:48 
Great work!
QuestionThis Control has a bug Pin
Gaurav.goel20923-Dec-11 22:47
memberGaurav.goel20923-Dec-11 22:47 
GeneralHelpful for the learner. Pin
gggmarketing10-Sep-11 3:29
membergggmarketing10-Sep-11 3:29 
GeneralMy vote of 5 Pin
E$w@r25-Feb-11 1:39
memberE$w@r25-Feb-11 1:39 
GeneralMy vote of 1 Pin
Ashish Tyagi 4015-Jan-11 9:26
memberAshish Tyagi 4015-Jan-11 9:26 
GeneralMy vote of 5 Pin
JF201513-Jan-11 19:52
memberJF201513-Jan-11 19:52 
GeneralMy vote of 5 Pin
SChristmas7-Jan-11 3:28
memberSChristmas7-Jan-11 3:28 
GeneralRe: My vote of 5 Pin
Sandeep Mewara7-Jan-11 3:30
mvpSandeep Mewara7-Jan-11 3:30 
GeneralWell packaged! Pin
HansonM3-Mar-10 18:02
memberHansonM3-Mar-10 18:02 
AnswerRe: Well packaged! Pin
Sandeep Mewara4-Mar-10 6:04
memberSandeep Mewara4-Mar-10 6:04 
GeneralNeat control! Pin
Nuri Ismail26-Feb-10 4:18
memberNuri Ismail26-Feb-10 4:18 
GeneralRe: Neat control! Pin
Sandeep Mewara26-Feb-10 4:24
memberSandeep Mewara26-Feb-10 4:24 
GeneralPretty cool, wish it didn't cause IE to run in quirks mode though Pin
USCGC200528-Jan-10 7:01
memberUSCGC200528-Jan-10 7:01 
AnswerRe: Pretty cool, wish it didn't cause IE to run in quirks mode though Pin
Sandeep Mewara28-Jan-10 20:31
memberSandeep Mewara28-Jan-10 20:31 
GeneralRe: Pretty cool, wish it didn't cause IE to run in quirks mode though Pin
Sandeep Mewara28-Jan-10 20:45
memberSandeep Mewara28-Jan-10 20:45 
GeneralRe: Pretty cool, wish it didn't cause IE to run in quirks mode though Pin
USCGC200529-Jan-10 4:01
memberUSCGC200529-Jan-10 4:01 
AnswerRe: Pretty cool, wish it didn't cause IE to run in quirks mode though Pin
Sandeep Mewara29-Jan-10 9:29
memberSandeep Mewara29-Jan-10 9:29 
GeneralArticle Pin
abhinav53198318-Jan-10 2:40
memberabhinav53198318-Jan-10 2:40 
AnswerRe: Article Pin
Sandeep Mewara18-Jan-10 4:03
memberSandeep Mewara18-Jan-10 4:03 
GeneralGood Control Pin
thatraja15-Jan-10 18:33
memberthatraja15-Jan-10 18:33 
AnswerRe: Good Control Pin
Sandeep Mewara15-Jan-10 23:05
memberSandeep Mewara15-Jan-10 23:05 
GeneralAwesome control Pin
Vani Kulkarni13-Jan-10 21:16
memberVani Kulkarni13-Jan-10 21:16 
AnswerRe: Awesome control Pin
Sandeep Mewara14-Jan-10 2:45
memberSandeep Mewara14-Jan-10 2:45 
Generalwow...Good articles this week Pin
Yves12-Jan-10 15:12
memberYves12-Jan-10 15:12 
AnswerRe: wow...Good articles this week Pin
Sandeep Mewara12-Jan-10 17:43
memberSandeep Mewara12-Jan-10 17:43 
GeneralGood Work Pin
Abinash Bishoyi11-Jan-10 19:54
memberAbinash Bishoyi11-Jan-10 19:54 
AnswerRe: Good Work Pin
Sandeep Mewara12-Jan-10 4:28
memberSandeep Mewara12-Jan-10 4:28 
GeneralGood Work ! Pin
Abhijit Jana10-Jan-10 3:50
mvpAbhijit Jana10-Jan-10 3:50 
AnswerRe: Good Work ! Pin
Sandeep Mewara11-Jan-10 1:11
memberSandeep Mewara11-Jan-10 1:11 
GeneralNot perfectly compatible with other ajax controls, but still good one. Pin
thundernow8-Jan-10 6:53
memberthundernow8-Jan-10 6:53 
AnswerRe: Not perfectly compatible with other ajax controls, but still good one. Pin
Sandeep Mewara9-Jan-10 1:43
memberSandeep Mewara9-Jan-10 1:43 
GeneralThis is really cool control. Pin
Narendra Kumar Meruga7-Jan-10 21:11
memberNarendra Kumar Meruga7-Jan-10 21:11 
AnswerRe: This is really cool control. Pin
Sandeep Mewara9-Jan-10 1:41
memberSandeep Mewara9-Jan-10 1:41 
GeneralThis will help me lot Pin
goyalvaibhav7-Jan-10 20:28
membergoyalvaibhav7-Jan-10 20:28 
AnswerRe: This will help me lot Pin
Sandeep Mewara9-Jan-10 1:41
memberSandeep Mewara9-Jan-10 1:41 
GeneralExcellent! Pin
Mr. Hughes7-Jan-10 8:14
memberMr. Hughes7-Jan-10 8:14 
AnswerRe: Excellent! Pin
Sandeep Mewara9-Jan-10 1:41
memberSandeep Mewara9-Jan-10 1:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1509028.1 | Last Updated 7 Jan 2010
Article Copyright 2010 by Sandeep Mewara
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid