Change the Fill Direction

The wijprogressbarwidget 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 option to take advantage of this feature. See the ProgressBar > Direction sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/progressbar/Direction.

Create an C1 ASP.NET MVC 5 Web Application.
In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.
Add the following markup within the <body> tags of the page.
```
<div id="progressbar1">
    </div>
```

After the last closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijprogressbar widget and set the fillDirection option.

<script type="text/javascript">
           $(document).ready(function () {
           $("#progressbar1").wijprogressbar({ value: 75, fillDirection: "north" });
        });   
   </script>

When you run the application, you'll see the progress bar fill from bottom-to-top. If you set the option to east or west, the bar will be horizontal.