jQuery Goal Slider

A lightweight jQuery plugin to animate a progress bar. This plugin is responsive.

Demo page

Installation

Include script after the jQuery library:

<script type="text/javascript" src="/path/to/jquery-goal-slider.js"></script>

Recommended : use the scss file and customize easily the settings.

Alternatively you can include the css

<link rel="stylesheet" href="/path/to/jquery-goal-slider.css"></script>

Usage

In order to use this plugin you have to follow the provided html template. Some elements are optional : .jgs__motivational and .jgs__steps-container. Replace the text content at your convenance in those two containers.

<div class="jgs__container">
    <div class="jgs__motivational">
        Help us reach
        <br> our goals.
    </div>
    <div class="jgs__image-container">
        <div class="jgs__percentage-container">
            <span class="jgs__percentage-value"></span>
        </div>
        <div class="jgs__overlay-container">
            <img class="jgs__overlay-image" src="OVERLAY IMAGE HERE">
        </div>
        <img class="jgs__image-base" src="ORIGINAL IMAGE HERE"/>
    </div>
    <div class="jgs__steps-container">
        <div class="jgs__steps-highlighted"></div>
        <div class="jgs__step">
            <span class="jgs__sum-goal">250 000 €</span>
            <span class="jgs__goal">Our first goal</span>
        </div>
        <div class="jgs__step">
            <span class="jgs__sum-goal">500 000 €</span>
            <span class="jgs__goal">Our second goal</span>
        </div>
        <div class="jgs__step">
            <span class="jgs__sum-goal">750 000 €</span>
            <span class="jgs__goal">Our third goal</span>
        </div>
        <div class="jgs__step">
            <span class="jgs__sum-goal">1 000 000 €</span>
            <span class="jgs__goal">Our fourth goal</span>
        </div>
    </div>
</div>

To init the plugin please do as follows :

$('.jgs__container').goalSlider( { options } );

Options

easing (string)

An optional parameter to specify the animation easing. Defaults to easeOutCubic.

easing: 'swing'

duration (number)

An optional parameter specifying the length of the animation in milliseconds (ms). Defaults to 6000 (6 seconds).

duration: 2000

delay (number)

An optional parameter specifying the delay of the animation in milliseconds (ms). Defaults to 3000 (3 seconds)

delay: 300

percentage (number)

The final value that you want the bar to be animated to.

percentage: 42

slantDegree (number)

An optional parameter specifying the value of the slant. Defaults to 15. A value of 0 will disable the slant.

slantDegree: 10

onStart (function)

A function to be called when the animation beings.

onStart: function(){
  alert('The animation started')
}

onComplete (function)

A function to be called when the animation is complete.

onComplete: function(){
  alert('The animation is over')
}

License

MIT License (c) Antonin Cezard

acezard/jQuery-goal-slider