This library allows you to easily create awesome looking progress bars which can be easily customized with css.
This library also comes with a progress indicator which can be aligned to top and bottom and turned on/off with your preference.
Including library to project
First download this library.
To use this library you first need to link the progress bar library to your HTML file.
<script type="text/javascript" src="<LOCATION OF THE JAVASCRIPT FILE>"></script>With this library you can turn a div element into a progress bar.
Now, in order for this library to work with the div, the div needs to have an id (recommended).
To turn it (the div) into a progress bar, we will first make the div ready.
To do this we will use some attributes
- data-elem - This attribute makes the div element work as a progress bar.
- max - This is same as the attribute of the traditional progress bar. With this you set the max value of the progress.
- value - This is also same as the attribute of the progress tag. With this you set the current progress value.
- meter(optional) - This helps you set the visiblity of the meter. By Default its set to "off". But you can toggle it by setting the attribute value to "on"
- meterPosition(optional) - This helps you set the vertical position of the meter. By default its set to up however you can change it to Down by changing the attribute value to down
After you load the library into your project or in your html file, it declares a progressBAR object into global scope after the document is loaded
That means, it can be accessed by using the window object only after the document is loaded.
User available functions
- property - Set property of the progress bar
Syntax:
propery(object, element)
Supported values in object:
meter - set meter on / off
Example:
property ({meter: 'off'}, document.getElementById('id'))- theme - Change theme of the progress bar
Syntax:
theme(themename, element)
Available themes:
default, orange, blue, green, purple, red, redDark, blueDark, deepBlue, yellow
Example:
theme ("blueDark", document.getElementById('id'))- changeValue - Change value of the progress bar
Syntax:
changeValue(value, element)
Example:
changeValue (30, document.getElementById('id'))NOTE: In the examples above, div with id = id has been used.
<!DOCTYPE html>
<html>
<head>
<title>Progress Bar Example</title>
<script type="text/javascript" src="library/version 1.0/min/pbl-1.0.0.min.js"></script>
</head>
<body>
<div id="progressBarElem" data-elem="progress" max="100" value="50" meter="on" meterPosition="down"></div>
</body>
</html>document.addEventListener("DOMContentLoaded", function () {
var progressBarElem = document.getElementById("progressBarElem");
// Change the value to 70
window.progressBAR.changeValue(70, progressBarElem)
// Change the theme to red
window.progressBAR.theme('red', progressBarElem)
// Turn off the meter
window.progressBAR.property({meter: 'off'}, progressBarElem)
})What makes this library awesome is that they can be customized
The container can be styled by just selecting it with its id or if you want to change style of all containers then use the class progress and a !important flag for display, width, background-color.
Example (with reference to the previous example):
#progressBarElem {
background-color: <SOME COLOR> !important;
}NOTE: It is not recommended to change the height of the container, if you do so you also need to add some additional styles to keep everything properly aligned.
To change the color of the bar (the part that moves)
Select the bar class and set the background-color with a !important flag to change the global bar color use the class progress as the container.
Example (with reference to the previous example):
#progressBarElem > .bar {
background-color: <SOME COLOR> !important;
}To change the color of the meter (the number representation)
Select the meter class and set the color with a !important flag to change the global meter color use the class progress as the container.
Example (with reference to the previous example):
#progressBarElem > .bar > .meter{
color: <SOME COLOR> !important;
}If you change the height of the conatiner
Apply the following styles
<container> .bar > .meter {
bottom: <height of container>
}
<container> .bar .meterDown {
top: <height of container>
}Found a bug?
Please report to mukherjeesrijan2@gmail.com.