Quick Start

In this quick start, you'll learn how to add the ProgressBar widget to an HTML project using HTML markup and jQuery script.

To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.
Drop down and copy markup
Paste in your favorite text editor.
Copy Code

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Paste in your favorite text editor.	Copy Code
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.

References	Copy Code
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20183.140.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.js" type="text/javascript"></script>

References

Copy Code

<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20183.140.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.js" type="text/javascript"></script>

Add the following markup within the <body> tags to create the widget. The <div> element creates the widget, and we call its id attribute in jQuery to initialize it. This markup adds a 50 by 300 pixel progress bar with a heading above it and some text below it. The <div> element that calls the 'ui-helper-clearfix' class creates space after the widget so that the text after it renders below rather than beside it.

Markup	Copy Code
<h3>Fund Raising Goal: $1,000,000</h3> <div class="ui-helper-clearfix"> <div id="progressbar" style="width:50px;height:300px"></div> </div> <p>Funds collected to date: $750,000. <br>Won't you help us to reach our goal?</p>

Markup

Copy Code

<h3>Fund Raising Goal: $1,000,000</h3>
<div class="ui-helper-clearfix">
    <div id="progressbar" style="width:50px;height:300px"></div>
</div>
<p>Funds collected to date: $750,000. <br>Won't you help us to reach our goal?</p>

Within the <head> tags, below the references, add the following script to initialize the widget and set several widget options.

The amount of progress is 75 percent.
The animation of the progress bar is from bottom to top, or north.
The duration animation option is set to 1000 milliseconds.
The indicator image for the amount of progress is set to diagonal lines from the rocket theme instead of a solid color

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $("#progressbar").wijprogressbar({ value: 75, fillDirection: "north", animationOptions: { duration: 1000 }, indicatorImage: "http://cdn.wijmo.com/themes/rocket/images/ui-bg_diagonals-thick_50_00a6dd_40x40.png" }); }); </script>

Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () {
       $("#progressbar").wijprogressbar({
    value: 75,
    fillDirection: "north",    
    animationOptions: {
        duration: 1000
        },
    indicatorImage: "http://cdn.wijmo.com/themes/rocket/images/ui-bg_diagonals-thick_50_00a6dd_40x40.png"
    });
    });
</script>

Save your HTML file and open it in a browser. The widget appears like the following live widget.

Reference

wijprogressbar API

Concepts

Themes and Styles