Changing the Fill Direction of the Progress Bar

The C1ProgressBarExtender control allows you to change the direction in which the progress bar fills up. Options include east (left-to-right), west (right-to-left), north (bottom-to-top), and south (top-to-bottom) . Simply set the FillDirection property to take advantage of this feature.

Create an ASP.NET Web application.
Add a standard Panel control to the main content of your page.
Click the Panel smart tag and select Add Extender from the Tasks menu.
In the Extender Wizard, select C1ProgressBarExtender and click OK. A C1ProgressBarExtender control is added to the page and the TargetControlID is set to Panel1.
Select View | Properties Window in the Visual Studio menu.
Click the drop-down list at the top of the Properties window and select Panel1_C1ProgressBarExtender.
Set the C1ProgressBarExtender.FillDirection property to North.
Set the C1ProgressBarExtender.Value property to 75.

The markup should now look similar to the following:

<asp:Panel ID="Panel1" runat="server">

    </asp:Panel>

    <wijmo:C1ProgressBarExtender ID="Panel1_C1ProgressBarExtender" runat="server"

        FillDirection="North" TargetControlID="Panel1" Value="75">

    </wijmo:C1ProgressBarExtender>

Press F5 to run the application. You'll see the progress bar fill from bottom-to-top. If you set the FillDirection property to east or west, the bar will be horizontal.