Contents
Description:
A beautiful animated progress bar jQuery plugin with counter, is fully configurable, simple to use in your project and light-weight in the size.
Absolute-ProgressBar supports various types of progress bar, which are as following:
Basic progress barIn-line progress barProgress bar toolkitCustom Easing progress bar
You may also like:
Create a beautiful Circular Percentage Bar using CSS
How can I use it?
1. Include jQuery library in your file, if not added already.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
2. Include the progressBar.min.js file after jQuery library.
<script src=”./dist/progressBar.min.js”></script>
3. In step3, you will need to add the CSS file progressBar.min.css like following:
<link rel=”stylesheet” href=”./dist/progressBar.min.css”>
4. Now, create few <div> tags and assign class as ‘progress’ like this:
<div class=”progress” data-progress data-value=”70″ data-title=”HTML5″></div>
<div class=”progress” data-progress data-value=”75″ data-title=”CSS3″></div>
<div class=”progress” data-progress data-value=”90″ data-title=”JS”></div>
<div class=”progress” data-progress data-value=”90″ data-title=”WordPress”></div>
5. You will need to include following .js files if, you are looking to create custom easing progress bars.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js”></script>
The post A beautiful animated progress bar jQuery plugin with counter appeared first on Lipku.com.
Permanent link to this post here
