Progress Bar

Use the progress property from the Reactive API to display a visual scroll progress indicator that updates in real-time.

JavaScript

import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

const flicking = new Flicking("#flick", {
  moveType: "freeScroll"
});
const reactiveAPI = connectFlickingReactiveAPI(flicking);

const progressBar = document.querySelector(".progress-bar");
const progressText = document.querySelector(".progress-text");

reactiveAPI.subscribe("progress", value => {
  progressBar.style.width = `${value}%`;
  progressText.textContent = `Progress: ${value.toFixed(1)}%`;
});

Open Sandbox

React

import Flicking, { useFlickingReactiveAPI } from "@egjs/react-flicking";
import React from "react";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";

const COLORS = ["#3498db", "#e74c3c", "#2ecc71", "#9b59b6", "#f39c12"];

export default function App() {
  const flickingRef = React.useRef(null);
  const { progress } = useFlickingReactiveAPI(flickingRef);

  return (
    <div style={{ width: "100%" }}>
      <Flicking ref={flickingRef} moveType="freeScroll">
        {[0, 1, 2, 3, 4].map(index => (
          <div key={index} className="flicking-panel" style={{ backgroundColor: COLORS[index % COLORS.length] }}>
            {index + 1}
          </div>
        ))}
      </Flicking>

      <div className="progress-container">
        <div className="progress-track">
          <div className="progress-bar" style={{ width: `${progress}%` }} />
        </div>
        <div className="progress-text">Progress: {progress.toFixed(1)}%</div>
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<script setup>
import Flicking, { useFlickingReactiveAPI } from "@egjs/vue3-flicking";
import { ref } from "vue";
import "@egjs/vue3-flicking/dist/flicking.css";

const COLORS = ["#3498db", "#e74c3c", "#2ecc71", "#9b59b6", "#f39c12"];

const flickingRef = ref(null);
const { progress } = useFlickingReactiveAPI(flickingRef);
</script>

<template>
  <div style="width: 100%">
    <Flicking
      ref="flickingRef"
      :options="{ moveType: 'freeScroll' }"
    >
      <div
        v-for="index in 5"
        :key="index - 1"
        class="flicking-panel"
        :style="{ backgroundColor: COLORS[(index - 1) % COLORS.length] }"
      >
        {{ index }}
      </div>
    </Flicking>

    <div class="progress-container">
      <div class="progress-track">
        <div class="progress-bar" :style="{ width: progress + '%' }"></div>
      </div>
      <div class="progress-text">
        Progress: {{ progress.toFixed(1) }}%
      </div>
    </div>
  </div>
</template>


<style>

.flicking-viewport.vertical {
  display: block;
  width: 100%;
}

.flicking-panel {
  width: 200px;
  height: 150px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.panel-1 { background: #3e8ed0; }
.panel-2 { background: #00d1b2; }
.panel-3 { background: #f14668; }
.panel-4 { background: #ffe08a; color: #333; }
.panel-5 { background: #48c78e; }

.demo-container {
  margin-bottom: 24px;
}

.demo-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #666;
}

.button {
  padding: 8px 16px;
  margin: 4px;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.button:hover {
  background: #3498db;
  color: white;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 8px;
}

.flicking-panel {
  width: 150px;
  height: 120px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.progress-container {
  margin-top: 20px;
  width: 100%;
}

.progress-track {
  width: 100%;
  height: 8px;
  background: #ecf0f1;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  border-radius: 4px;
}

.progress-text {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: #7f8c8d;
}

</style>

Open Sandbox

Summary

Key API

Property	Type	Description
progress	number	Overall scroll progress percentage (0-100)

Behavior

Position	progress	Bar Width
Start	0	0%
Middle	~50	~50%
End	100	100%

Details

What is progress?

progress represents the current camera position as a percentage of the total scrollable range. Combining it with moveType: "freeScroll" allows continuous (non-snapping) progress updates, making it ideal for smooth progress bar animations.

Related Options

• moveType: "freeScroll": Enables continuous progress changes without snapping to panel boundaries.
• bound: true: Ensures progress reaches exactly 0 at the start and 100 at the end.

Use Cases

When to use

• Image gallery scroll progress
• Onboarding step indicator
• Content reading progress

Related Links

Related API

• progress: Scroll progress percentage
• connectFlickingReactiveAPI: Connect Flicking to Reactive API

Related Demos

• Pagination: Dot pagination navigation
• Prev / Next: Previous/Next button navigation