Progress bar layer - dynamically change the value

You can use this JavaScript code to dynamically change the value of the progress bar based on its current value.

n2('.n2-ss-static-slide .n2-ss-item-progressbar').data('counter').to(0.5, 'linear');

1. "to" value between 0 and 1
2. easing

You can use a code like this to adjust the start value as well:

n2('.n2-ss-static-slide .n2-ss-item-progressbar').data('counter').fromTo(0.5, 1, 'linear');

Parameters

1. "from" value between 0 and 1
2. "to" value between 0 and 1
3. easing

Example

A progress bar used as a counter for the slides. You'll need to place the code to the Slider Settings → Developer tab → JavaScript callbacks field of your slider.

Code

if(!this.isAdmin){
this.ready($.proxy(function() {
        n2('.n2-ss-static-slide .n2-ss-item-progressbar').data('counter').to((this.currentRealSlide.index+1)/this.slides.length, 'linear');
    }, this));
this.sliderElement.on('mainAnimationStart',
    $.proxy(function(e, animation, previousSlideIndex, currentSlideIndex) {
        if(previousSlideIndex == this.slides.length-1 && currentSlideIndex == 0){
            n2('.n2-ss-static-slide .n2-ss-item-progressbar').data('counter').fromTo(currentSlideIndex, (currentSlideIndex+1)/this.slides.length, 'linear');
        } else {
            n2('.n2-ss-static-slide .n2-ss-item-progressbar').data('counter').to((currentSlideIndex+1)/this.slides.length, 'linear');
        }
        n2('.n2-ss-static-slide .n2-ss-item-progressbar-label .count').text(currentSlideIndex+1);
        n2('.n2-ss-static-slide .n2-ss-item-progressbar-label .all').text(this.slides.length);
    }, this));
}

Progress bar setup

Result