Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
By default, the RadProgressBar control's orientation is horizontal and the progress indicator's fill direction is from left to right.
You can change the orientation and direction of the Telerik Progress Bar via the Orientation and Reversed properties.
In this demo, you can set different combinations of these options to examine how the layout of the RadProgressBar changes.
Note that when the RadProgressBar control is set to RTL mode, the default Progress Indicator directions is reversed, but the Reversed property will be still set to False.
<%@ Page Language="vb" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.ProgressBar.Orientation.DefaultVB" %> <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %> <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <!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" /> <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="progressContainer" /> <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel> <div class="demo-container" runat="server" id="progressContainer"> <telerik:RadProgressBar RenderMode="Lightweight" runat="server" ID="ValueProgressBar" BarType="Value" Value="80" MinValue="0" MaxValue="100"> </telerik:RadProgressBar> <telerik:RadProgressBar RenderMode="Lightweight" runat="server" ID="ChunkProgressBar" BarType="Chunk" Value="2" MinValue="0" MaxValue="5"> </telerik:RadProgressBar> <telerik:RadProgressBar RenderMode="Lightweight" runat="server" ID="IndeterminateProgressBar" BarType="Chunk" Indeterminate="true"></telerik:RadProgressBar> </div> <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1"> <Views> <qsf:View runat="server"> <qsf:ConfiguratorColumn runat="server" Size="Narrow"> <qsf:RadioButtonList runat="server" Label="Orientation" ID="OrientationConfigurator" AutoPostBack="true" OnSelectedIndexChanged="OrientationConfigurator_SelectedIndexChanged"> <asp:ListItem Text="Horizontal" Value="Horizontal" Selected="true" /> <asp:ListItem Text="Vertical" Value="Vertical" /> </qsf:RadioButtonList> </qsf:ConfiguratorColumn> <qsf:ConfiguratorColumn runat="server" Size="Narrow"> <qsf:RadioButtonList runat="server" ID="ReversedConfigurator" Label="Reversed" AutoPostBack="true" OnSelectedIndexChanged="ReversedConfigurator_SelectedIndexChanged"> <asp:ListItem Text="True" Value="true" /> <asp:ListItem Text="False" Value="false" Selected="true" /> </qsf:RadioButtonList> </qsf:ConfiguratorColumn> </qsf:View> </Views> </qsf:ConfiguratorPanel> </form> </body> </html>