This time I will share jQuery Plugin and tutorial about Circular And Linear Progressbar In JavaScript and SVG – progressBar, hope it will help you in programming stack.
A pretty simple progressbar JavaScript plugin that helps you generate animated, circular or linear progress bars using SVG based on raphael.js.
Works both with jQuery and Vanilla JavaScript.
How to use it:
1. Include the needed raphael.js library and the progressBar.js script on the webpage. jQuery is OPTIONAL.
2 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
4 |
<script src="/path/to/cdn/raphael.min.js"></script> |
5 |
<script src="/path/to/progressBar.min.js"></script> |
2. Create a placeholder for the progress bar.
1 |
<div class="example"></div> |
3. Create a circular progress bar. Possible parameters:
- el: DOM element
- val: Percentage value (0-100)
- bg: Background color
- color: Text Color
- textColor: Value color
- fontSize: Value size
- size: Circle size
- r: Radius
- time: Duration
- easing: ‘linear’, ‘<‘ or ‘easeIn’ or ‘ease-in’, ‘>’ or ‘easeOut’ or ‘ease-out’, ‘<>’ or ‘easeInOut’ or ‘ease-in-out’, ‘backIn’or ‘back-in’, ‘backOut’ or ‘back-out’, ‘elastic’, ‘bounce’
1 |
win.loopFun(document.getElementsByClassName('example'), 60, '#ccc', '#00A0E9', '#00A0E9', '20px', 20, 60, 1000, 'bounce'); |
4. Create a linear progress bar. Possible parameters:
- el: DOM element
- val: Percentage value (0-100)
- bg: Background color
- color: Text Color
- textColor: Value color
- fontSize: Value size
- lenght: Bar width
- size: Bar height
- time: Duration
- easing: ‘linear’, ‘<‘ or ‘easeIn’ or ‘ease-in’, ‘>’ or ‘easeOut’ or ‘ease-out’, ‘<>’ or ‘easeInOut’ or ‘ease-in-out’, ‘backIn’or ‘back-in’, ‘backOut’ or ‘back-out’, ‘elastic’, ‘bounce’
1 |
win.stripFun(document.getElementsByClassName('example'), 55.66, '#ccc', '#00A0E9', 'white', '14px', 300, 20, 1000, 'back-out'); |
5. Use it as a jQuery plugin.
1 |
win.loopFun($('.example')[0],60,'#ccc','#00A0E9','#00A0E9','20px',20,60,1000,'bounce'); |
2 |
win.loopFun($('.example')[0],88.88,'#ccc','#565656','#333','20px',20,60,1000,'back-out'); |
3 |
win.stripFun($('.example')[0],55.66,'#ccc','#00A0E9','white','14px',300,20,1000,'back-out'); |
4 |
win.stripFun($('.example')[0],30.66,'#ccc','#00A0E9','white','14px',300,20,1000,'easeInOut'); |
This awesome jQuery plugin is developed by zhuxuxu. For more Advanced Usages, please check the demo page or visit the official website.
