New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
jQuery lightweight Progress Bar
License
Download
Demo
Installation
Step 1: Include files
Include the Javascript files for jQuery and for the progress bar:
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery-progress-bar.js"></script>
Step 2: Create HTML
Create HTML elements for the progress bar and for the label(optional).
Example:
<div class="progress">
<div id="progress-label" class="progress-label">
<!-- Progress text will be rendered here -->
</div>
<div id="progress-container" class="progress-container">
<!-- Progress bar will be rendered here -->
</div>
</div>
Step 3: Create the Progress bar
Create a new DG.ProgressBar object like this:
<script type="text/javascript">
var progressBar = new DG.ProgressBar({
renderTo: "#progress-container",
renderLabelTo: "#progress-label"
});
</script>
This will create a new progress bar and render it inside <div id="progress-container"> . The label will be rendered to <div id="progress-label">.
Usually, you will load progress from a server. To do this, you'll need to specify three attributes:
- url: url on the server, example: progress-controller.php
- data: data sent to the url, example: { "getprogress" : true }
- pollRate: interval between each poll request to the server in milliseconds(default is 100)
- responseHandler: This is a function which will be called when there's new progress bar response from the server.
Finally, you need to initiate the first poll request by calling the startPolling method.
Example:
<script type="text/javascript">
var progressBarServer = new DG.ProgressBar({
renderTo: "#progress-container-server",
renderLabelTo: "#progress-label-server",
url : "progress-controller.php", // server url
pollRate: 200,
data:{
"getProgress" : true,
},
responseHandler:function(response, progressBar){
progressBar.setStep(response.current, response.steps);
progressBar.setLabel(response.label);
}
});
progressBarServer.startPolling();
</script>
In the code above, we have set the url to progress-controller.php, and specified that the variables getProgress=true will be passed with each request.
We have also defined the responseHandler function which will respond to each response from the server. In this example, the server have sent response like:
{
"steps": 100,
"current": 3
}
where steps(100) is the total number of steps, and current(3) is current progress, i.e. 3% completed.
the Response Handler is responsible for updating the progress bar by calling one or more of the update methods:
- setStep(current, total): Updates the progress bar.
- setPercent(percent): Updates the progress bar.
- setLabel(label): Updates the label.
When the response handler is finished, the Progress Bar script will automatically schedule a new call to the server if it's not completed(percent<100).
Colors
You may specify different colors than the defaults for the progress bar using the color and colorProgress properties
Example:
var progressBarServer = new DG.ProgressBar({
...
color:"#999",
colorProgress:"#FFF",
...
});
This will show the progress bar with an initial dark color(#999). When the progress bar moves, progress will be indicated with a white color(#FFF).
Height and Corner Radius
The height and corner radius can be configured using the properties:
- height: Height of progress bar in pixels, example: height:4
- cornerRadius: Corner radius for all corners in pixels, example: cornerRadius:2. Corner radius should never be greater than half the height.
- corners: An object defining each corner, example: corners:{ "tl": 2, "tr":2, "bl":0, "br": 0}, where "tl" is top left, "tr" top right, "bl" bottom left and "br" bottom right.
Example code:
var progressBarServer = new DG.ProgressBar({
...
height:4,
corners: { "tl": 2, "tr":2, "bl":0, "br": 0} ",
...
});
Post your comment
Comment preview: