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

WebForms ProgressBar Overview

Please fill your details
First name
Last name
Birthday
Gender
Occupation

A RadProgressBar inside a RadToolTip is used to display how many of the fields in the form are filled. You can see all the main features of the ASP.NET AJAX RadProgressBar control in the following demos: Custom Label, Orientation.

About RadProgressBar for ASP.NET AJAX

Telerik ASP.NET Progress Bar is a lightweight customizable control that allows you to visualize the progress of an operation such as a download, file transfer, level of completion of a form or any other measurable process.

RadProgressBar 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.
  • Support for different progress types—value, percent and chunks.
  • Custom status label.
  • Support for undetermined progress.
  • Horizontal and vertical orientation.
  • Animation effects.
  • Right-to-left support.
  • Rich client-side and server-side API.
  • Multiple client-side events.

More about RadProgressBar for ASP.NET AJAX
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <div class="registrationForm">
            <div class="titleBar">
                <div class="titleBarBgr"></div>
                <span>Please fill your details</span>
            </div>
            <div class="form-container">
                <div class="form-row">
                    <div class="form-cell">
                        <span class="rfdAspLabel">First name</span>
                    </div>
                    <div class="form-cell">
                        <telerik:RadTextBox RenderMode="Lightweight" ID="rtbFirstName" runat="server" Width="260px">
                            <ClientEvents OnFocus="demo.elementFocused" OnLoad="firstName_load" />
                        </telerik:RadTextBox>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-cell">
                        <span class="rfdAspLabel">Last name</span>
                    </div>
                    <div class="form-cell">
                        <telerik:RadTextBox RenderMode="Lightweight" ID="rtbLastName" runat="server" Width="260px">
                            <ClientEvents OnFocus="demo.elementFocused" OnLoad="lastName_load" />
                        </telerik:RadTextBox>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-cell">
                        <span class="rfdAspLabel">Birthday</span>
                    </div>
                    <div class="form-cell">
                        <telerik:RadDatePicker RenderMode="Lightweight" ID="rdpBirthday" runat="server" Width="260px" MinDate="01/01/1000" MaxDate="01/01/3000">
                            <Calendar>
                                <SpecialDays>
                                    <telerik:RadCalendarDay Repeatable="Today" ItemStyle-CssClass="rcToday">
                                    </telerik:RadCalendarDay>
                                </SpecialDays>
                            </Calendar>
                            <DateInput>
                                <ClientEvents OnFocus="demo.elementFocused" OnValueChanged="demo.valueChanged" />
                            </DateInput>
                            <ClientEvents OnPopupOpening="demo.onPopupOpening" />
                        </telerik:RadDatePicker>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-cell">
                        <span class="rfdAspLabel">Gender</span>
                    </div>
                    <div class="form-cell">
                        <telerik:RadComboBox RenderMode="Lightweight" ID="rcbGender" runat="server" Width="260px" EmptyMessage=" - Select One - " OnClientFocus="demo.elementFocused"
                                             OnClientSelectedIndexChanged="demo.selectedIndexChanged" OnClientLoad="genderDD_load">
                            <Items>
                                <telerik:RadComboBoxItem runat="server" Text="Rather not say" />
                                <telerik:RadComboBoxItem runat="server" Text="Male" />
                                <telerik:RadComboBoxItem runat="server" Text="Female" />
                            </Items>
                        </telerik:RadComboBox>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-cell">
                        <span class="rfdAspLabel">Occupation</span>
                    </div>
                    <div class="form-cell">
                        <telerik:RadTextBox RenderMode="Lightweight" ID="rtbOccupation" runat="server" Width="260px">
                            <ClientEvents OnFocus="demo.elementFocused" OnLoad="occupation_load" />
                        </telerik:RadTextBox>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-cell">
                    </div>
                    <div class="form-cell">
                        <div class="line"></div>
                    </div>
                </div>
                <div class="form-row rowButton">
                    <div class="form-cell">
                    </div>
                    <div class="form-cell">
                        <telerik:RadButton RenderMode="Lightweight" ID="rbSubmit" runat="server" Text="SUBMIT" AutoPostBack="false" CssClass="rbPrimaryButton btnSubmit"></telerik:RadButton>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" Position="MiddleRight" ShowEvent="FromCode" HideEvent="FromCode"
                        Width="220px" Height="70px" RelativeTo="Element" RenderInPageRoot="true" EnableRoundedCorners="true" EnableShadow="false">
        <div class="progressBarToolTipContent">
            <telerik:RadProgressBar RenderMode="Lightweight" ID="rpbFormCompleteness" runat="server" Width="192px" BarType="Chunk" ShowLabel="false" >
                <ClientEvents OnLoad="progressBar_load" />
                <AnimationSettings Duration="500" EnableChunkAnimation="true" />
            </telerik:RadProgressBar>
            <div class="progressLabel">
                progress of form completion: <span id="progressValue"></span>
            </div>
        </div>
    </telerik:RadToolTip>

    <script type="text/javascript" src="scripts.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        serverIDs({
            birthdayPickerID: "<%= rdpBirthday.ClientID %>",
            tooltipID: "<%= RadToolTip1.ClientID %>"
        });
        //]]>
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance