Silk skin

RadProgressArea - Telerik 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:

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 90+ 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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <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
    <div class="demo-container size-narrow">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <telerik:RadButton RenderMode="Lightweight" ID="buttonSubmit" runat="server" Text="Start Processing" OnClick="buttonSubmit_Click">
        <telerik:RadProgressManager ID="RadProgressManager1" runat="server" />
        <telerik:RadProgressArea RenderMode="Lightweight" ID="RadProgressArea1" runat="server" Width="500px" />

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?