Progress Bar

Reactive API의 progress 속성을 사용하여 실시간으로 업데이트되는 시각적 스크롤 진행률 표시기를 구현합니다.

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

요약

주요 API

속성	타입	설명
progress	number	전체 스크롤 진행률 백분율 (0-100)

동작

위치	progress	바 너비
시작	0	0%
중간	~50	~50%
끝	100	100%

상세 설명

progress란?

progress는 현재 카메라 위치를 전체 스크롤 가능 범위의 백분율로 나타냅니다. moveType: "freeScroll"과 함께 사용하면 스냅 없이 연속적인 진행률 업데이트가 가능하여 부드러운 프로그레스 바 애니메이션에 이상적입니다.

관련 옵션

• moveType: "freeScroll": 패널 경계에 스냅하지 않고 연속적인 진행률 변화를 가능하게 합니다.
• bound: true: 시작 지점에서 정확히 0, 끝 지점에서 정확히 100이 되도록 보장합니다.

사용 시나리오

이런 경우에 사용하세요

• 이미지 갤러리 스크롤 진행률
• 온보딩 단계 표시기
• 콘텐츠 읽기 진행률

관련 링크

관련 API

• progress: 스크롤 진행률 백분율
• connectFlickingReactiveAPI: Flicking을 Reactive API에 연결

관련 데모

• Pagination: 도트 페이지네이션 네비게이션
• Prev / Next: 이전/다음 버튼 네비게이션