New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms ProgressArea Overview

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:

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

About RadProgressArea for ASP.NET AJAX

The Telerik ASP.NET RadProgressArea 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 120+ 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.

Key Features

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

More about RadProgressArea for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="ProgressArea.Examples.CustomProgress.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="InformationBox1" Icon="Info" Type="Info" runat="server">
        Press the button below to initiate a custom process and monitor the progress with
            RadProgressArea
    </qsf:MessageBox>
    <div class="demo-container size-narrow">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadButton RenderMode="Lightweight" ID="buttonSubmit" runat="server" Text="Start Processing" OnClick="buttonSubmit_Click">
        </telerik:RadButton>
        <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
        <telerik:RadProgressArea RenderMode="Lightweight" ID="RadProgressArea1" runat="server" Width="500px" />
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance