Absolute-ProgressBar

Absolute ProgressBar a simple lightweight yet configurable jQuery progress bar plugin.

Basic Usage

1. Include jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. Include Plugin:

<script src="./dist/progressBar.min.js"></script>

3. Include Stylesheet:

<link rel="stylesheet" href="./dist/progressBar.min.css">

4. Add markup

<div class="ab-progress" data-progress data-value="70" data-title="HTML5"></div>
<div class="ab-progress" data-progress data-value="75" data-title="CSS3"></div>
<div class="ab-progress" data-progress data-value="90" data-title="JS"></div>
<div class="ab-progress" data-progress data-value="90" data-title="WordPress"></div>

5. Data Attribute method

<div 
    data-value="" 
    data-title="" 
    data-height="6"
    data-bg="transparent"
    data-fill="linear-gradient(to right, #148cfa, #64f5d2)"
    data-border="#eee"
    data-tooltip="inline"
    data-duration="1500"
    data-autoplay="true"
    data-waypoint="true"
    data-waypoint-offset="bottom-in-view"
    data-easing="swing">
</div>

6. Optional Scripts

<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>

Configuration

Advanced

Demo

Bugs? 🐛

Please let us know: https://github.com/AbsolutePlugins/Absolute-ProgressBar/issues

License

GPL-3.0-or-later © Absolute Plugins