Placing ProgressBar on Your website can be made in a 3 simple steps.
1. Add JavaScript and CSS definitions.
2. Define HTML element, which You want to set as a progress bar container.
3. Add JavaScript code which will create Your progress bar.

<script type="text/javascript" src="progressbar.js"></script>
<link rel="stylesheet" type="text/css" href="progressbar.css" />

<div id="my_progress_bar"></div>

<script type="text/javascript">

	var config = {
		borderRadius: 10,
		width: 300,
		height: 20,
		imageUrl: 'images/h_fg2.png',
	};
	
	var myProgressBar = new ProgressBar("my_progress_bar", config);

</script>

Look at the configuration object property list to find out how ProgressBar can be configured. Note, that some configuration properties and also ProgressBar properties are of integer type, but instead of simple integer value an enumeration is used for a better value description.

After ProgressBar object is created, You can set it's current value by calling this method:

	myProgressBar.setValue(50);

Progress bar is created by adding some HTML code to element specified while calling ProgressBar constructor. If a foreground image width is smaller than progress bar width, then either for horizontal and vertical progress bar, HTML looks like that:

<div id="my_progress_bar" class="progressbar_parent">
	<div class="progressbar_background"></div>
	<div class="progressbar_left"></div>
	<div class="progressbar_middle">
		<div class=""></div>
	</div>
	<div class="progressbar_right"></div>
	<div class="progressbar_marker"></div>
	<div class="progressbar_text_horizontal">Loaded in 45 %</div>
</div>

Whereas if foreground image width is greater or equal to progress bar width, then progress bar HTML looks like that:

<div id="my_progress_bar" class="progressbar_parent">
	<div class="progressbar_background"></div>
	<div class="progressbar_wrapper"></div>
	<div class="progressbar_marker"></div>
	<div class="progressbar_text_horizontal">Loaded in 45 %</div>
</div>

Knowing this could be useful when You would like to modify progress bar appearance by CSS styles or programmatically.