Widgets > wijprogressbar |
Let end-users know the progress of an operation with the wijprogressbar widget. You can easily customize the look of the indicator with animations, styles, labels, and more.
Open the .cshtml for the View in which you want to display a progressbar. Add an DOM element like in the following markup:
<div id="progressbar" style="width:50px;height:300px"></div>
Now you need to initialize the widget, which you can do by adding the following script to the .cshtml file:
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#progressbar").wijprogressbar({ value: 75, fillDirection: "north" });
});
</script>
Note that you set the value and fillDirection options. When you start the project, the fillDirection option, which is set to north, will make the progress bar vertical, and then value property will set the value to 75%.
For more information about wijprogressbar, click one of the external links to view our Wijmo wiki documentation: