Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadProgressArea - Telerik's ASP.NET ProgressArea

Press the button below to initiate a custom process and monitor the progress with RadProgressArea

  • Total Progress % ( ) Total
  • Progress % ()
  • Custom progress in action:
  • Elapsed time:  Estimated time:  Speed: To test the behavior of our controls on mobile devices, scan the QR code.

About RadProgressArea for ASP.NET AJAX

Telerik Web Forms Progress Bar control allows your users to monitor the progress of any measurable process. You can also use it in combination with file upload components. You can easily style the control and make it fit your scenario thanks to the 20 built-in skins and support for templates.

RadProgressArea and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

About This Demo

This demo illustrates how easy it is to show progress monitoring with Telerik Progress Bar. For that purpose you need to simply add a RadProgressArea and RadProgressManager on your page. Then using the RadProgressContext class you send the progress couters to RadProgressManager. For more details on the ProgressArea API and configuration settings, check out this help article.

Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular ProgressArea demo, you can use the following path to find it in the sample website application:

Key Features

  • Progress Monitoring of Measurable Processes
  • File Upload Process Visualization
  • Templates for Easy Customization


Show code in new window Demo isolation steps
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="ProgressArea.Examples.CustomProgress.DefaultCS" %>

<%@ Register Src="~/Upload/Examples/ObsoleteMessage.ascx" TagName="ObsoleteMessage"
    TagPrefix="obsoleteMessageUC" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/ProgressArea/Examples/CustomProgress/Info.ascx" TagName="Info"
    TagPrefix="qsf" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Custom progress monitoring with RadProgressArea for ASP.NET AJAX</title>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
        <qsf:InformationBox ID="InformationBox1" runat="server">
            Press the button below to initiate a custom process and monitor the progress with
        <br /><br />
        <telerik:RadButton ID="buttonSubmit" runat="server" Text="Start Processing" OnClick="buttonSubmit_Click">
        <br /><br /><br />
        <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
        <telerik:RadProgressArea ID="RadProgressArea1" runat="server" />
    <br /><br />
     <div class="qsf-overview-qr">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/ProgressArea.png" AlternateText="" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        <a href=""></a>