Basic progress bar

A thin bar pinned to the top of the slider that fills proportionally as you advance. Works best in linear (non-loop) sliders so the bar has a clear start and end.

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
    <div class="c--slider-a__slide">5</div>
  </div>
</div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }
.c--slider-a__slide { flex-shrink: 0; width: 100%; height: 260px; }

/* Progress bar — injected by plugin at the top of the container */
.c--slider-a__progress-bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  background: #6C2BD9;
  transition: width 0.3s linear;
  z-index: 10;
}

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    width: 100%;
    height: 260px;
  }

  &__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: #6C2BD9;
    transition: width 0.3s linear;
    z-index: 10;
  }
}

import { Slider } from '@andresclua/sliderkit'
import { arrows, progressBar, pagination } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  plugins: [
    arrows(),
    progressBar(),
    pagination({ type: 'fraction' }),
  ],
})

Progress bar + autoplay

Combined with autoplay, the bar gives users a visual sense of how long until the next slide. Pair a thin bar with a slow autoplay delay (3–5 s) for hero banners where you don't want intrusive pagination.

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
    <div class="c--slider-a__slide">5</div>
  </div>
</div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }
.c--slider-a__slide { flex-shrink: 0; width: 100%; height: 260px; }

.c--slider-a__progress-bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  background: #6C2BD9;
  transition: width 0.3s linear;
  z-index: 10;
}

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    width: 100%;
    height: 260px;
  }

  &__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: #6C2BD9;
    transition: width 0.3s linear;
    z-index: 10;
  }
}

import { Slider } from '@andresclua/sliderkit'
import { arrows, progressBar, autoplay } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  loop: true,
  plugins: [
    autoplay({ delay: 2500, pauseOnHover: true }),
    arrows(),
    progressBar(),
  ],
})

Custom bar style

Override .c--slider-a__progress-bar in CSS to match your design. Here it's moved to the bottom edge and styled thicker with a gradient fill.

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
    <div class="c--slider-a__slide">5</div>
  </div>
</div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }
.c--slider-a__slide { flex-shrink: 0; width: 100%; height: 260px; }

/* Thick bar at the bottom with gradient */
.c--slider-a__progress-bar {
  position: absolute;
  bottom: 0; left: 0;
  top: auto;
  height: 5px;
  background: linear-gradient(to right, #6C2BD9, #EC4899);
  transition: width 0.3s linear;
  z-index: 10;
  border-radius: 0 3px 3px 0;
}

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    width: 100%;
    height: 260px;
  }

  &__progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    top: auto;
    height: 5px;
    background: linear-gradient(to right, #6C2BD9, #EC4899);
    transition: width 0.3s linear;
    z-index: 10;
    border-radius: 0 3px 3px 0;
  }
}

import { Slider } from '@andresclua/sliderkit'
import { arrows, progressBar, pagination } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  plugins: [
    arrows(),
    progressBar(),
    pagination({ type: 'fraction' }),
  ],
})