A beautiful animated progress bar jQuery plugin with counter

Category: JavaScript/jQuery Plugins Loading | July 30, 2021
Author: AbsolutePlugins
Official Page: Go to website
Last Update: August 6, 2021
License: MIT

jquery progress bar plugin

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 bar
  • In-line progress bar
  • Progress bar toolkit
  • Custom Easing progress bar

You may also like:

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>