The WijProgressBar 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.

1. Create an ASP.NET Web application with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
2. Add a standard Panel control to the main content of  your page.
3. In Source view, use the following markup to add a WijProgressBar control to the page and set the TargetControlID to Panel1.

     <cc1:WijProgressBar ID="Panel1_WijProgressBar" runat="server"        
   

           TargetControlID="Panel1" ToolTip="{1} percent" Value="75"> 
   

     </cc1:WijProgressBar>
   

4. Select View | Properties Window in the Visual Studio menu.
5. Click the drop-down list at the top of the Properties window and select Panel1_WijProgressBar.
   • Set the FillDirection property to North.
   • Set the Value property to 75.

   The markup should now look similar to the following:

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

       </asp:Panel>        
   

       <cc1:WijProgressBar ID="Panel1_WijProgressBar" runat="server"       
   

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

       </cc1:WijProgressBar>
   

6. 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.