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');


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


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.

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));
    $.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
Parameter Value
Value 0
Start from 0
Total 100
Label Slide <span class="count">1</span> of <span class="overall">4</span>